Reactjs - 将状态值从一个组件传递到另一个组件

Posted 2023-02-23

【中文标题】Reactjs - 将状态值从一个组件传递到另一个组件

【英文标题】：Reactjs - passing state value from one component to another

【发布时间】：2018-03-07 15:43:26

【问题描述】：

我有两个组件 SideNav 和 Dashboard（两个在不同的 js 文件中）。 SideNav 将选择框作为过滤器。我必须将一个数组从仪表板组件传递到侧边栏组件。该数组必须作为选择框的值（位于 sidenav 组件内）。

P.S. 如果我在两个不同的 JS 文件中定义了两个不同的组件类会怎样。 例如HomeComponent/Home.js -> 父组件 Dashboard/Dashboard.js -> 子组件 我正在对“Home.js”文件进行 API 调用并获取一些数据。我想将这些数据传递给“Dashboard.js”文件（组件） 我研究的所有示例，它们在同一个 JS 文件中显示了两个组件。

class Dashboard extends Component 
  constructor(props) 
    super(props);
    this.state  = viz:,filterData:;
  
  var data1= ['1','2','3'];
  this.setState(data1: data1, function () 
     console.log(this.state.data1);
  );

 

//Sidebar

class Sidebar extends Component 

   constructor(props) 
     super(props);
     this.state  = 
       data: ['opt1','opt2']
     ;
   

  handleClick(e) 
    e.preventDefault();
    e.target.parentElement.classList.toggle('open');
    this.setState(data: this.state.data1, function () 
      console.log(this.state.data);
    );
  

  render() 

    const props = this.props;
    const handleClick = this.handleClick;

    return (
      <div className="sidebar">
        <nav className="sidebar-nav">
          <Nav>
            <li className="nav-item nav-dropdown">
              <p className="nav-link nav-dropdown-toggle" onClick=handleClick.bind(this)>Global</p>
              <ul className="nav-dropdown-items">
              <li> Organization <br/>
               <select className="form-control">
                <option value="">Select </option>
                this.state.data.map(function (option,key) 
                   return <option key=key>option</option>;
                 )
               </select>

【问题讨论】：

你能分享一些代码吗？

更好的方法是提升状态，然后将其作为道具传递给两个组件

Shubham Khatri：提升国家？你能解释清楚吗

我已经编辑了这个问题。我必须从仪表板组件传递 data1 的值，并在侧边栏组件中更新 data 的值。在实际场景中，只有在仪表板加载后，我才会获得 data1 的值

拥有状态管理器可能会帮助你解决这个问题，试试 redux redux.js.org

【参考方案1】：

如果必须将状态从 Dashboard 传递到 Sidebar，则必须从 Dashboard 的渲染函数渲染 Sidebar。在这里，您可以将 Dashboard 的状态传递给 Sidebar。

代码sn-p

class Dashboard extends Component 
...
...
  render()
    return(
    <Sidebar data=this.state.data1/>
    );
  

如果您希望 Dashboard 接收对传递给 Sidebar 的 props (data1) 所做的更改，您需要提升状态。即，您必须将函数引用从仪表板传递到侧边栏。在 Sidebar 中，您必须在希望将 data1 传递回 Dashboard 时调用它。 代码sn-p。

class Dashboard extends Component 
  constructor(props)
    ...
    //following is not required if u are using => functions in ES6.
    this.onData1Changed = this.onData1Changed.bind(this);
  
  ...
  ...
  onData1Changed(newData1)
    this.setState(data1 : newData1, ()=>
      console.log('Data 1 changed by Sidebar');
    )
  

  render()
    return(
    <Sidebar data=this.state.data1 onData1Changed=this.onData1Changed/>
    );
  


class Sidebar extends Component 
  ...
  //whenever data1 change needs to be sent to Dashboard
  //note: data1 is a variable available with the changed data
  this.props.onData1changed(data1);

参考文档：https://facebook.github.io/react/docs/lifting-state-up.html

【参考方案2】：

您只能将 props 从父组件传递给子组件。要么重组你的组件层次结构来获得这种依赖，要么使用像 Redux (react-redux) 这样的状态/事件管理系统。

【参考方案3】：

我在父组件和子组件上遇到了同样的问题，解决方案只是将函数（更改父组件中的状态）作为道具发送给子组件。通过这种方式，两者都共享该特定变量的状态。希望这种简单的方法对您有所帮助！

【参考方案4】：

我相信保持状态值与页面 URL 保持一致是另一个好方法，不仅可以传递值，还可以通过 url 保持页面状态可控。

假设您正在构建一个高级搜索页面，其中不同的组件将控制搜索条件，因此，除了搜索功能之外，用户还应该能够通过使用的 URL 保留他的搜索设置。

假设单击组件 x 中的链接会在当前页面 url 中添加一个查询字符串条件 1=x，对于其他组件，依此类推。假设我们还将搜索功能配置为依赖 URL 来从中读取状态值，这样，您就可以将值从特定组件传递到任意数量的组件，而不受限制。

【参考方案5】：

这称为道具钻孔。 您可以通过多种方式将数据从一个组件传递到另一个组件

使用上下文挂钩 上下文 API Redux（它是一种模式）

Context 与 useContext 挂钩，这是一种更好的方法，因为使用 Context 会增加代码复杂度

const themes = 
          light: 
            foreground: "#000000",
            background: "#eeeeee"
          ,
          dark: 
            foreground: "#ffffff",
            background: "#222222"
          
    ;
    
    const ThemeContext = React.createContext(themes.light);
    
    function App() 
      return (
        <ThemeContext.Provider value=themes.dark>
          <Toolbar />
        </ThemeContext.Provider>
      );
    
    
    function Toolbar(props) 
      return (
        <div>
          <ThemedButton />
        </div>
      );
    
    
    function ThemedButton() 
      const theme = useContext(ThemeContext);  
           return (    
                   <button style= background: theme.background, 
                           color: theme.foreground 
                      > I am styled by theme context!</button> );          
                    

详细信息您可以访问链接：useContext、Context和Redux

Redux 更适合大型应用程序，如果您有多个 Context，请始终使用 useContext hook。