解决 React 中组件间传参的难点-JavaScript中文网-JavaScript教程资源分享门户

React 是一款流行的前端框架，但在使用它过程中，组件之间的传参是一个经常遇到的问题。传参是组件之间通信必不可少的一环，本文将介绍两种解决 React 中组件间传参的难点的方法。

方法一：props 传参

React 中最基础和常用的传参方法是通过 props 进行传递。在父组件中定义一个 props 属性，然后把这个 props 属性作为参数传递给子组件，在子组件中通过 this.props.xxx 获取这个传递给它的 props。

// javascriptcn.com 代码示例
// ParentComponent.js
import React from "react";
import ChildComponent from "./ChildComponent";

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      parentData: "parent data"
    };
  }

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

export default ParentComponent;

// ChildComponent.js
import React from "react";

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

export default ChildComponent;

这种方法的缺点是如果父组件的数据改变，子组件并不会自动更新。

方法二：Context 传参

Context 是 React 从 16.3 版本开始引入的一种可以在组件树中共享数据的方式。也就是说，Context 允许你在组件树中传递数据，而不必一级一级地手动传递 props。

要使用 Context 传参，需要首先在父组件中定义 Context，并且在该组件中提供一个 React.Provider 组件，把需要共享的数据放在 value 上。接下来，我们就可以在所有子组件中使用 this.context 来获取这个共享的数据。

// javascriptcn.com 代码示例
// ParentComponent.js
import React from "react";
import PropTypes from "prop-types";

const DataContext = React.createContext();

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      parentData: "parent data"
    };
  }

  render() {
    return (
      <DataContext.Provider value={this.state.parentData}>
        <ChildComponent />
      </DataContext.Provider>
    );
  }
}

ParentComponent.propTypes = {
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
};

export default ParentComponent;

// ChildComponent.js
import React from "react";
import PropTypes from "prop-types";
import DataContext from "./ParentComponent";

class ChildComponent extends React.Component {
  render() {
    return (
      <DataContext.Consumer>
        {data => <div>{data}</div>}
      </DataContext.Consumer>
    );
  }
}

ChildComponent.propTypes = {
  data: PropTypes.string
};

export default ChildComponent;

Context 的使用需要在父组件中定义和初始化，因此 Context 不太适用于需要频繁更新的数据。相反，这种技术适合在应用中传递全局级别的数据，例如用户的登录状态信息。

总结

以上两种传参方式是 React 最常用的传参方式。使用 props 传参是最简单的方法，但当应用变得越来越复杂时，使用 Context 传参可以更好的管理数据流。在实际开发中，我们需要根据应用的不同场景来选择合适的方法进行传参。

通过本文的介绍，相信读者可以在自己的 React 项目中更好地使用这两种传参方式，并能够高效地解决组件之间传参的难点。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64fec5c995b1f8cacdd72757