如何从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

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

如果基值在父项中，并且您希望将其传递给子项，请使用propshttps://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

但如果它更复杂的方式，我建议使用上下文挂钩https://reactjs.org/docs/hooks-reference.html#usecontext

(附言：同样在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);   
};