如何在 React 组件之间传递数据

2020-05-29 08:00:00 · 飞浪

介绍 React是一个主要由Facebook维护的JavaScript库。尽管React非常受欢迎，但在React中处理数据可能有点棘手。本指南总结了在React中处理数据的三种方法：

介绍

React 是一个主要由 Facebook 维护的 JavaScript 库。尽管 React 非常受欢迎，但在 React 中处理数据可能有点棘手。本指南总结了在 React 中处理数据的三种方法：

使用 props 将数据从父级传递给子级
使用回调将数据从子级传递到父级
在兄弟节点之间传递数据。可以通过以下方法之一实现：
a. 整合上述方法
b.使用 Redux
c. 利用 React 的 Context API。

阅读本指南的其余部分，以更好地理解这些概念并学习如何实现它们。

父母向孩子使用道具

尝试想象一下应用程序的目录结构如下：父组件实际上渲染了应用程序中的子组件。

      App
 └── Parent
   ├── Child1
   └── Child2
    

这是React中最简单、最基本的数据流方向。

      class Parent extends React.Component {state = { data : "Hello World" } 
render() {
        
        return (
            <div>
                 <Child1/>            //no data to send             
                 <Child2 dataFromParent = {this.state.data} />
            </div>
        );    }
}
//Sending data as a state is not obligatory. You can use simple vars or const variables to pass data from parent to child.
    

使用变量this.props.dataFromParent来获取从父级传递给子级的数据。

      class Child2 extends React.Component {
 render() {
         
         return (
             <div>
                 Data from parent is:{this.props.dataFromParent}
             </div>
         );
     }
 }
    

使用回调从子节点到父节点

假设你想从child1向父母发送一条消息，内容是“你好，你好吗？”请执行以下步骤：

在 Parent.js 中，设置一个回调函数来获取从子级访问的参数。
将回调函数作为 prop 发送给 child1.js。

      class Parent extends React.Component {
state = { message: "" }
callbackFunction = (childData) => {
      this.setState({message: childData})
},


 render() {
        return (
            <div>
                 <Child1 parentCallback = {this.callbackFunction}/>
                 <p> {this.state.message} </p>
            </div>
        );
}
}
    

使用child1.js 中的this.props.callback(dataToParent)传递数据。

      class Child1 extends React.Component{sendData = () => {
         this.props.parentCallback("Hey Popsie, How’s it going?");
    },

render() { 
//Any time you wish to send data from child to parent component, call the sendData function.
    }
};
    

兄弟姐妹之间

对于初学者来说，选择一种在兄弟姐妹之间共享数据的方法可能有点棘手。本指南涵盖了三种常用方法。阅读完所有方法后，您可以选择一种最喜欢的方法。

方法一：综合上述方法。

尽管这是一种简单的方法，但它不适用于复杂的目录结构。您可能需要进行大量编码才能在相隔几层的组件之间发送数据。然后您的数据在每个中间层之间来回传输。

方法 2：使用 Redux，在全局存储中维护可能需要的所有子组件的状态，并从该存储中获取数据。

方法 3：利用 React 的 Context API。

最近，许多开发人员选择 React 的 Context API 而不是 Redux，因为前者可以让他们免于 prop-drilling。Prop-drilling 是将变量传递给子组件的过程的通用名称。主要概念是随着您继续前进，将参数传递给下一个函数。

看一下以下目录结构，您需要在Child1和Child2之间来回传递数据。在此示例中，假设您需要将“你好吗？”从Child1发送到Child2。

      App
├── Child1
└── Child2
    

可以使用 Context API 完成此操作，如下所示：

步骤 1：为两个子组件生成一个提供程序组件。

该提供商的主要目标是：

维护状态，包括两个组件将使用的数据以及用于操作它的回调
返回contextObject.Provider JSX 组件

第 2 步：在提供程序组件内部，将上面提到的状态和回调作为 props 传递给所有子组件。

      export const MContext = React.createContext();  //exporting context object
class MyProvider extends Component {
state = {message: ""}
render() {
        return (
            <MContext.Provider value={
            {   state: this.state,
                setMessage: (value) => this.setState({
                            message: value })}}>
            {this.props.children}   //this indicates that all the child tags with MyProvider as Parent can access the global store.
            </MContext.Provider>)
    }
}
    

您可以将提供程序视为控制其子项的程序。这包括每个状态的全局存储以及负责处理这些状态的回调函数。因此，任何需要任何东西的组件都必须联系提供程序才能访问对象。

换句话说：

为了让Child1创建或编辑消息，它必须联系提供者并设置其状态。
为了让Child2查看数据，它必须访问提供程序并获取其状态。

步骤 3：将MyProvider组件设置为两个子组件Child1和Child2 的父组件。

      class App extends React.Component {
render() {
        return (
            <div>
                 <MyProvider>
                      <div className="App">
                      <Child1/>
                      <Child2/>
                      </div>
               </MyProvider>
            </div>
        );
}
}
    

步骤 4：按照如下步骤使用ContextObject.Consumer ：

由于Child1和Child2都被设置为提供者的消费者，因此他们可以在消费者标签内访问提供者。

      import MContext
class Child1 extends React.Component {
render() {
    return (
        <div>
        <Mcontext.Consumer>
        {(context) => (
       <button onClick={()=>{context.setMessage("New Arrival")}}>Send</button>
       )}
        </Mcontext.Consumer>
        </div>
    ) }
}
    

现在Child2可以通过访问消费者标签内的提供者来接收数据。

      import MContext
class Child2 extends React.Component {
render() {
       return (
         <div>
            <Mcontext.Consumer>
             {(context) => (
              <p>{context.state.message}}</p>)}
            </Mcontext.Consumer>
         </div>
   )}
}
    

结论

本指南介绍了如何在 React 中以三种方式在不同的组件之间传递数据：父组件到子组件、子组件到父组件以及兄弟组件之间。它还介绍了在兄弟组件之间传递数据的三种常用方法。您可以尝试并使用适合您需要的方法

了解更多

探索 Pluralsight 的这些 React 课程以继续学习：

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何在 React 组件之间传递数据

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

class Parent extends React.Component {state = { data : "Hello World" } render() { return ( <div> <Child1/> //no data to send <Child2 dataFromParent = {this.state.data} /> </div> ); } } //Sending data as a state is not obligatory. You can use simple vars or const variables to pass data from parent to child.

class Child2 extends React.Component { render() { return ( <div> Data from parent is:{this.props.dataFromParent} </div> ); } }

class Parent extends React.Component { state = { message: "" } callbackFunction = (childData) => { this.setState({message: childData}) }, render() { return ( <div> <Child1 parentCallback = {this.callbackFunction}/> <p> {this.state.message} </p> </div> ); } }

class Child1 extends React.Component{sendData = () => { this.props.parentCallback("Hey Popsie, How’s it going?"); }, render() { //Any time you wish to send data from child to parent component, call the sendData function. } };

export const MContext = React.createContext(); //exporting context object class MyProvider extends Component { state = {message: ""} render() { return ( <MContext.Provider value={ { state: this.state, setMessage: (value) => this.setState({ message: value })}}> {this.props.children} //this indicates that all the child tags with MyProvider as Parent can access the global store. </MContext.Provider>) } }

class App extends React.Component { render() { return ( <div> <MyProvider> <div className="App"> <Child1/> <Child2/> </div> </MyProvider> </div> ); } }

import MContext class Child1 extends React.Component { render() { return ( <div> <Mcontext.Consumer> {(context) => ( <button onClick={()=>{context.setMessage("New Arrival")}}>Send</button> )} </Mcontext.Consumer> </div> ) } }

import MContext class Child2 extends React.Component { render() { return ( <div> <Mcontext.Consumer> {(context) => ( <p>{context.state.message}}</p>)} </Mcontext.Consumer> </div> )} }