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

Posted 2023-04-14

【中文标题】如何从 React 的另一个组件中读取变量？

【英文标题】：How can I read a variable from another component in React?

【发布时间】：2021-01-06 08:03:41

【问题描述】：

我使用 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>

非常感谢！！！

【问题讨论】：

第二个组件是否包含在第一个组件中？能否提供完整的组件代码？

相反：第一个组件包含在第二个组件中。我只是添加更多代码以了解我需要什么。谢谢 M. Faisal

【参考方案1】：

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

如果基值在父级中并且您想将其传递给子级，请使用道具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：同样在反应中你不使用getElementById，而是另一个名为useRef的钩子 https://reactjs.org/docs/hooks-reference.html#useref)

【参考方案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);   
;