如何在 React 中将 JSON 对象从子组件传递到父组件

2020-03-23 08:00:00 · 飞浪

介绍在React中，组件之间传递数据是组件间通信的关键任务。状态和props是此任务中最广泛使用的技术。使用状态和props，您可以传递多种数据类型，包括字符串、数组、数字和对象。在

介绍

在 React 中，组件之间传递数据是组件间通信的关键任务。状态和 props 是此任务中最广泛使用的技术。使用状态和 props，您可以传递多种数据类型，包括字符串、数组、数字和对象。

在本指南中，您将学习如何使用不同的方法（包括使用 props 和 state）将数据从父组件传递到子组件，反之亦然。

将数据从父组件传递到子组件

React 遵循基于组件的架构。每个屏幕或屏幕的一部分都可以由一个组件表示。

例如，静态值可以像这样传递给子组件：

      import React, { Component } from "react";
import { render } from "react-dom";
import Demo1 from "./demo1";

class App extends Component {
  constructor() {
    super();
    this.state = {
      message: "This is dummy message",
    };
  }

  render() {
    const { message } = this.state;

    return (
      <div>
        <div>Pass data from parent to child component</div>
        <hr />
        <Demo1 
          message={this.state.message}
        />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));
    

在此应用组件中，我们创建了一个名为message的状态值，其中包含文本。要将相同的状态值传递给名为Demo1的子组件，请创建一个名为message的附加键。除了键之外，还要传递状态值，例如this.state.message，子组件可以将其作为 props 值使用，如下所示：

      import React, { Component } from "react";

class Demo1 extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
  }

  render() {
    const { message } = this.props;

    return (
      <div>
        <p>Data coming from parent component</p>
        <hr />
        <table>
            <tr>
              <td>Message is : { message }</td>
            </tr>
        </table>
      </div>
    );
  }
}

export default Demo1;
    

您已使用语句访问了 props 值。

      const { message } = this.props;
    

如果您想在render()方法中使用它，请直接使用它的名称，就像这样。

      <table>
    <tr>
        <td>Message is : { message }</td>
    </tr>
</table>
    

现在，您已将值从父组件访问到子组件。同样，您还可以传递其他值，例如对象或数组，如下所述。

例如，如果有一个员工数组，并且您必须将所有员工详细信息显示到子组件中，则按如下方式传递完整数组：

      import React, { Component } from "react";
import { render } from "react-dom";
import Demo1 from "./demo1";

class App extends Component {
  constructor() {
    super();
    this.state = {
      message: [],
      employee: [
        {
          id: 1,
          name: "Abc",
          age: 25
        },
        {
          id: 2,
          name: "Def",
          age: 28
        },
        {
          id: 3,
          name: "Ghi",
          age: 30
        }
      ]
    };
    this.onSubmitMessage = this.onSubmitMessage.bind(this);
  }

  onSubmitMessage(message) {
    this.setState({ message: message });
  }

  render() {
    const { employee, message } = this.state;

    return (
      <div>
        <div>Pass data from parent to child component</div>
        <hr />
        <Demo1 employeeData={employee} />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));
    

在此示例中，您已将一个数组 employee 传递到状态中。employee包含不同的对象，包括员工详细信息，并且根据记录，您需要将详细信息显示到子组件中，但作为一个 prop。

将状态值传递给子组件后，可以从子组件访问它们，如下所示：

      render() {
    const { employeeData } = this.props;

    return (
      <div>
        <p>Data coming from parent component</p>
        <hr />
        <table border="2">
          {employeeData.map((data, index) => {
            return (
              <>
                <tr key={data.id}>
                  <td>id :</td>
                  <td>{data.id}</td>
                </tr>
                <tr key={index}>
                  <td>Name :</td>
                  <td>{data.name}</td>
                </tr>
                <tr key={index}>
                  <td>Age :</td>
                  <td>{data.age}</td>
                </tr>
              </>
            );
          })}
        </table>
      </div>
    );
  }
    

来自父组件作为 props 发送的每条记录都称为employeeData。这是将数据从父组件发送到子组件的主要方式之一。

将 JSON 对象从子组件传递到父组件

重要的是实现回调函数，以便一旦任何操作触发子组件，它就会转发给父组件。

让我们看一个实现简单表单的例子，该表单将消息作为由表单控件驱动的文本输入传递，如下所示：

      import React, { Component } from "react";

class Demo2 extends Component {
  constructor() {
    super();
    this.state = {
      greetingMessag: "",
    };
    this.onMessageChange = this.onMessageChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  onMessageChange(event) {
    let message = event.target.value;
    this.setState({ greetingMessag: message });
  }

  // pass message to parent component using callback
  onSubmit() {
    this.props.onSubmitMessage(this.state.greetingMessag);
  }

  render() {
    return (
      <div>
        <p>Pass data from child component to parent</p>
        <tr />
        <table border="2">
          <tr>
            <td colspan="2">Pass greeting message to parent component</td>
          </tr>
          <tr>
            <td>Type greeting message :</td>
            <td>
              <input type="text" onChange={this.onMessageChange} />
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <button onClick={this.onSubmit}>Submit</button>
            </td>
          </tr>
        </table>
      </div>
    );
  }
}

export default Demo2;
    

让我解释一下这个例子。

我们有一个状态值，greetingMessage，一旦用户改变输入值它就会更新并将其发送给父组件。
然后，有两个不同的方法。一个是onMessageChange()，用于在用户更改输入值时更新状态值；另一个是onSubmit()，用于将更新的消息作为回调函数传递给父组件。
已实现一个表单，其中包含输入控件和按钮，当用户单击提交按钮时，该表单即提交。

主要部分是onSubmit()方法，该方法将方法作为 prop，并将更新的消息传递给父组件。

      onSubmit() {
    this.props.onSubmitMessage(this.state.greetingMessag);
}
    

因此，将更新后的消息传递给父组件后，将其消费到父组件中，如下所示：

      import React, { Component } from "react";
import { render } from "react-dom";
import Demo2 from "./demo2";

class App extends Component {
  constructor() {
    super();
    this.state = {
      message: "",
    };
    this.onSubmitMessage = this.onSubmitMessage.bind(this);
  }

  onSubmitMessage(message) {
    this.setState({ message: message });
  }

  render() {
    const { employee, message } = this.state;

    return (
      <div>
        <div>Pass data from parent to child component</div>
        <div>
            The message coming from the child component is : {message}
        </div>
        <hr />
        <Demo2 
          // passing as callback function
          onSubmitMessage={this.onSubmitMessage} 
        />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));
    

在上面的例子中，您已经实现了回调函数。

      onSubmitMessage(message) {
    this.setState({ message: message });
}
    

所以一旦用户从子组件点击提交按钮，页面就会重定向到父组件，您可以根据可行性使用它。

从函数onSubmitMessage获取来自子组件的消息作为参数后，将其配置到状态值中并像这样使用它：

      render() {
    const { employee, message } = this.state;

    return (
      <div>
        <div>Pass data from parent to child component</div>
        <div>
            The message coming from the child component is : {message}
        </div>
        <hr />
        <Demo2 
          // passing as callback function
          onSubmitMessage={this.onSubmitMessage} 
        />
      </div>
    );
  }
    

以相同的方式，将 JSON 对象从子组件传递到父组件，就像传递文本、数字、数组、对象等普通值一样。

从父组件创建 JSON 数据到状态中，如下所示：

      constructor() {
    super();
    this.state = {
      jsonData: [
        {
          id: 1,
          name: 

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

_查看原文

技术指南

React框架

阅读全文

如何在 React 中将 JSON 对象从子组件传递到父组件

杭州电子商务研究院

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

import React, { Component } from "react"; import { render } from "react-dom"; import Demo1 from "./demo1"; class App extends Component { constructor() { super(); this.state = { message: "This is dummy message", }; } render() { const { message } = this.state; return ( <div> <div>Pass data from parent to child component</div> <hr /> <Demo1 message={this.state.message} /> </div> ); } } render(<App />, document.getElementById("root"));

import React, { Component } from "react"; class Demo1 extends Component { constructor() { super(); this.state = { name: "React" }; } render() { const { message } = this.props; return ( <div> <p>Data coming from parent component</p> <hr /> <table> <tr> <td>Message is : { message }</td> </tr> </table> </div> ); } } export default Demo1;

import React, { Component } from "react"; import { render } from "react-dom"; import Demo1 from "./demo1"; class App extends Component { constructor() { super(); this.state = { message: [], employee: [ { id: 1, name: "Abc", age: 25 }, { id: 2, name: "Def", age: 28 }, { id: 3, name: "Ghi", age: 30 } ] }; this.onSubmitMessage = this.onSubmitMessage.bind(this); } onSubmitMessage(message) { this.setState({ message: message }); } render() { const { employee, message } = this.state; return ( <div> <div>Pass data from parent to child component</div> <hr /> <Demo1 employeeData={employee} /> </div> ); } } render(<App />, document.getElementById("root"));

render() { const { employeeData } = this.props; return ( <div> <p>Data coming from parent component</p> <hr /> <table border="2"> {employeeData.map((data, index) => { return ( <> <tr key={data.id}> <td>id :</td> <td>{data.id}</td> </tr> <tr key={index}> <td>Name :</td> <td>{data.name}</td> </tr> <tr key={index}> <td>Age :</td> <td>{data.age}</td> </tr> </> ); })} </table> </div> ); }

import React, { Component } from "react"; class Demo2 extends Component { constructor() { super(); this.state = { greetingMessag: "", }; this.onMessageChange = this.onMessageChange.bind(this); this.onSubmit = this.onSubmit.bind(this); } onMessageChange(event) { let message = event.target.value; this.setState({ greetingMessag: message }); } // pass message to parent component using callback onSubmit() { this.props.onSubmitMessage(this.state.greetingMessag); } render() { return ( <div> <p>Pass data from child component to parent</p> <tr /> <table border="2"> <tr> <td colspan="2">Pass greeting message to parent component</td> </tr> <tr> <td>Type greeting message :</td> <td> <input type="text" onChange={this.onMessageChange} /> </td> </tr> <tr> <td colspan="2"> <button onClick={this.onSubmit}>Submit</button> </td> </tr> </table> </div> ); } } export default Demo2;

import React, { Component } from "react"; import { render } from "react-dom"; import Demo2 from "./demo2"; class App extends Component { constructor() { super(); this.state = { message: "", }; this.onSubmitMessage = this.onSubmitMessage.bind(this); } onSubmitMessage(message) { this.setState({ message: message }); } render() { const { employee, message } = this.state; return ( <div> <div>Pass data from parent to child component</div> <div> The message coming from the child component is : {message} </div> <hr /> <Demo2 // passing as callback function onSubmitMessage={this.onSubmitMessage} /> </div> ); } } render(<App />, document.getElementById("root"));

render() { const { employee, message } = this.state; return ( <div> <div>Pass data from parent to child component</div> <div> The message coming from the child component is : {message} </div> <hr /> <Demo2 // passing as callback function onSubmitMessage={this.onSubmitMessage} /> </div> ); }