如何从 React 中的另一个组件读取变量？

Question

我使用 React 从组件中的两个选项元素接收这两个值。 问题：如何从另一个组件读取这两个变量？

const handleInputChange = (e) => {   
    const valueFilterActive = document.getElementById("activeFilter").value;
    const valueFilterName = document.getElementById("bussFilter").value;
    alert(valueFilterName+valueFilterActive);   
 };

第二个组件代码行：

 return (
    <> 
      <div className="col-md-4 p-2">
        <FirstComponent/>
  
      </div>
      <div className="col-md-8 p-1 ">
          <div className={ valueFilterActive  === 'Activado' ? "text-success" : "text-primary card mb-1"} key={link.id}>

非常感谢！！！

Answer 1

如果您想从另一个组件读取变量，您可以使用多种方法。这取决于您如何链接这些组件。

如果基值在父级中并且您想将其传递给子级，请使用 props https://reactjs.org/docs/components-and-props.html

const element = <Welcome data1 ={valueFilterActive} data2 ={valueFilterName} />;

function Welcome(props) {  
return <h1>Hello, {props.valueFilterName} {props.valueFilterActive}</h1>;
}

如果基值在子级中，并且您想将其传递给父级，请使用回调函数 https://reactjs.org/docs/faq-functions.html

但是如果它的方式更复杂，我建议使用 Context Hook https://reactjs.org/docs/hooks-reference.html#usecontext

（PS：同样在 React 中，你不使用

getElementById

，而是使用另一个名为 useRef 的钩子 https://reactjs.org/docs/hooks-reference.html#useref）

Answer 2

// in the component that renders <FirstComponent> create  hooks for values you'd like to track
import React, { useState } from 'react';

const [inputValues, setInputValues] = useState({});

return (
  <> 
    <div className="col-md-4 p-2">
      <FirstComponent onChange={setInputValues}/>

    </div>
    <div className="col-md-8 p-1 ">
        <div className={ valueFilterActive  === 'Activado' ? "text-success" : "text-primary card mb-1"} key={link.id}>


// in your <FirstComponent> call setInputValues and set variables 
const handleInputChange = (e) => {   
  const valueFilterActive = document.getElementById("activeFilter").value;
  const valueFilterName = document.getElementById("bussFilter").value;
  // this will set `inputValues` variable to be an object with `valueFilterActive` and `valueFilterName` properties
  setInputValues({valueFilterActive, valueFilterName})
  alert(valueFilterName+valueFilterActive);   
};

Answer 3

我过去从另一个组件访问组件的 props 的方式非常简单。看看：

< Component that owns the prop > 导出默认函数 Component1() {

}