如何在 ReactJS 中将数据从一个组件传递到另一个组件？

ReactJS 是一个流行的前端 JavaScript 库，它使用被称为 props 和 state 的机制来管理组件数据。本文将介绍如何在 ReactJS 中将数据从一个组件传递到另一个组件。

父子组件传递数据

在 ReactJS 中，组件之间的数据传递可以根据组件之间的父子关系进行。父组件可以将数据作为 props 传递给其子组件。

父组件

下面是一个父组件的例子：

import React, { Component } from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      parentData: '这是来自父组件的数据',
    };
  }

  render() {
    return (
      <div>
        <h1>{this.state.parentData}</h1>
        <ChildComponent childData={this.state.parentData} />
      </div>
    );
  }
}

export default ParentComponent;

在这个例子中，父组件 ParentComponent 在其构造函数中定义了一个名为 parentData 的 state 变量，其中存储了要传递给子组件的数据。该变量可以作为 props 传递给子组件 ChildComponent。

子组件

下面是一个子组件的例子：

import React, { Component } from 'react';

class ChildComponent extends Component {
  render() {
    return (
      <div>
        <h2>{this.props.childData}</h2>
      </div>
    );
  }
}

export default ChildComponent;

在这个例子中，子组件 ChildComponent 接收一个名为 childData 的 props， 并将其显示为标题。

代码片段

import React, { Component } from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      parentData: '这是来自父组件的数据',
    };
  }

  render() {
    return (
      <div>
        <h1>{this.state.parentData}</h1>
        <ChildComponent childData={this.state.parentData} />
      </div>
    );
  }
}

import React, { Component } from 'react';

class ChildComponent extends Component {
  render() {
    return (
      <div>
        <h2>{this.props.childData}</h2>
      </div>
    );
  }
}

跨级组件传递数据

有时，我们需要在 ReactJS 中将数据从一个组件传递到另一个组件，这些组件不是父子关系，而是祖孙关系。在这种情况下，我们可以使用 React 的上下文（context）机制。

创建上下文

首先，我们需要在父组件中创建上下文。在这个例子中，我们将创建一个名为 MyContext 的上下文对象，并定义一个名为 data 的属性：

import React, { Component } from 'react';

const MyContext = React.createContext();

class MyProvider extends Component {
  state = {
    data: '这是来自祖先组件的数据',
  };

  render() {
    return (
      <MyContext.Provider value={{ data: this.state.data }}>
        {this.props.children}
      </MyContext.Provider>
    );
  }
}

export { MyProvider, MyContext };

在这个例子中，我们使用 React.createContext() 方法创建一个名为 MyContext 的上下文对象。我们还创建了一个包含数据的 MyProvider 组件，并使用 MyContext.Provider 将数据提供给子组件。 注意，我们在这里使用了 this.props.children，以便在 MyProvider 的子组件中使用提供的数据。

使用上下文

在需要使用祖孙关系之间共享的数据的任何组件中，可以使用 React 的 contextType 属性来声明它使用的上下文。在这个例子中，我们将 MyContext 上下文分配给名为 NestedChildComponent 和 GrandchildComponent 的组件的 contextType 属性：

import React, { Component } from 'react';
import { MyContext } from './MyContext';

class NestedChildComponent extends Component {
  static contextType = MyContext;
  render() {
    return (
      <div>
        <h2>来自祖先组件的数据：{this.context.data}</h2>
        <GrandchildComponent />
      </div>
    );
  }
}

class GrandchildComponent extends Component {
  static contextType = MyContext;
  render() {
    return (
      <div>
        <h3>来自祖先组件的数据：{this.context.data}</h3>
      </div>
    );
  }
}

export { NestedChildComponent, GrandchildComponent };

在这里，我们使用 static 关键字给组件的 contextType 属性分配了一个名为 MyContext 的上下文对象。该 contextType 属性指定，这些组件需要访问 MyContext 中的数据。

代码片段

import React, { Component } from 'react';
import { MyContext } from './MyContext';

class NestedChildComponent extends Component {
  static contextType = MyContext;
  render() {
    return (
      <div>
        <h2>来自祖先组件的数据：{this.context.data}</h2>
        <GrandchildComponent />
      </div>
    );
  }
}

class GrandchildComponent extends Component {
  static contextType = MyContext;
  render() {
    return (
      <div>
        <h3>来自祖先组件的数据：{this.context.data}</h3>
      </div>
    );
  }
}

const MyContext = React.createContext();

class MyProvider extends Component {
  state = {
    data: '这是来自祖先组件的数据',
  };

  render() {
    return (
      <MyContext.Provider value={{ data: this.state.data }}>
        {this.props.children}
      </MyContext.Provider>
    );
  }
}

export { MyProvider, NestedChildComponent, GrandchildComponent };