React 实战：常见的组件传值方式介绍-JavaScript中文网-JavaScript教程资源分享门户

React 是一款非常流行的前端框架，它的组件化思想是其最大的特点。在组件化开发中，组件之间的传值是非常常见的操作。本文将介绍 React 中常见的组件传值方式，帮助读者更好地理解 React 组件之间的数据传递。

父组件向子组件传值

父组件向子组件传值是 React 中最常见的传值方式。在 React 中，我们可以通过 props 属性来实现父组件向子组件传值。props 是一个对象，它包含了传递给组件的所有属性。

下面是一个简单的父子组件传值的示例代码：

// javascriptcn.com 代码示例
import React from 'react';
import ReactDOM from 'react-dom';

class ParentComponent extends React.Component {
  render() {
    return (
      <ChildComponent name="Tom" />
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        Hello, {this.props.name}!
      </div>
    );
  }
}

ReactDOM.render(
  <ParentComponent />,
  document.getElementById('root')
);

在上面的代码中，我们定义了一个 ParentComponent 父组件和一个 ChildComponent 子组件。在 ParentComponent 中，我们通过 props 属性向 ChildComponent 传递了一个名为 name 的属性。在 ChildComponent 中，我们可以通过 this.props.name 来获取这个属性的值。

子组件向父组件传值

子组件向父组件传值也是 React 中常见的传值方式。在 React 中，我们可以通过回调函数的方式来实现子组件向父组件传值。

下面是一个简单的子父组件传值的示例代码：

// javascriptcn.com 代码示例
import React from 'react';
import ReactDOM from 'react-dom';

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: '' };
    this.handleMessageChange = this.handleMessageChange.bind(this);
  }

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

  render() {
    return (
      <div>
        <ChildComponent onMessageChange={this.handleMessageChange} />
        <div>Message from child: {this.state.message}</div>
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: '' };
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    this.setState({ message: event.target.value });
    this.props.onMessageChange(event.target.value);
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.message} onChange={this.handleInputChange} />
      </div>
    );
  }
}

ReactDOM.render(
  <ParentComponent />,
  document.getElementById('root')
);

在上面的代码中，我们定义了一个 ParentComponent 父组件和一个 ChildComponent 子组件。在 ParentComponent 中，我们通过 onMessageChange 属性向 ChildComponent 传递了一个回调函数 handleMessageChange。在 ChildComponent 中，我们在输入框的 onChange 事件中调用了这个回调函数，并将输入框的值作为参数传递给了它。这样，当输入框的值发生改变时，就会触发 handleMessageChange 函数，从而更新 ParentComponent 的状态。

兄弟组件之间传值

兄弟组件之间传值是 React 中比较困难的一个问题。在 React 中，我们通常会使用 Redux 或者 Context API 来解决这个问题。

Redux

Redux 是一个非常流行的状态管理库，它可以帮助我们管理应用程序的状态。在 Redux 中，我们可以通过 store 来共享状态，从而实现兄弟组件之间的数据传递。

下面是一个简单的兄弟组件传值的示例代码：

// javascriptcn.com 代码示例
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';

const reducer = (state = { message: '' }, action) => {
  switch (action.type) {
    case 'UPDATE_MESSAGE':
      return { message: action.message };
    default:
      return state;
  }
};

const store = createStore(reducer);

class SiblingComponent1 extends React.Component {
  constructor(props) {
    super(props);
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    store.dispatch({ type: 'UPDATE_MESSAGE', message: event.target.value });
  }

  render() {
    return (
      <div>
        <input type="text" onChange={this.handleInputChange} />
      </div>
    );
  }
}

class SiblingComponent2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: store.getState().message };
    this.handleStoreChange = this.handleStoreChange.bind(this);
  }

  componentDidMount() {
    this.unsubscribe = store.subscribe(this.handleStoreChange);
  }

  componentWillUnmount() {
    this.unsubscribe();
  }

  handleStoreChange() {
    this.setState({ message: store.getState().message });
  }

  render() {
    return (
      <div>
        Message from sibling: {this.state.message}
      </div>
    );
  }
}

ReactDOM.render(
  <div>
    <SiblingComponent1 />
    <SiblingComponent2 />
  </div>,
  document.getElementById('root')
);

在上面的代码中，我们使用了 Redux 来实现兄弟组件之间的数据传递。在 SiblingComponent1 中，我们在输入框的 onChange 事件中调用了 dispatch 函数，将输入框的值作为参数传递给了 UPDATE_MESSAGE action，从而更新了 store 中的状态。在 SiblingComponent2 中，我们通过 getState 函数获取了 store 中的状态，并在 handleStoreChange 函数中更新了组件的状态。这样，当 store 中的状态发生改变时，就会触发 SiblingComponent2 的重新渲染。

Context API

Context API 是 React 中另一种解决兄弟组件传值问题的方案。它通过提供一个上下文对象，使得组件之间可以共享数据。

下面是一个简单的兄弟组件传值的示例代码：

// javascriptcn.com 代码示例
import React from 'react';
import ReactDOM from 'react-dom';

const MessageContext = React.createContext();

class SiblingComponent1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: '' };
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    this.setState({ message: event.target.value });
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.message} onChange={this.handleInputChange} />
        <MessageContext.Provider value={this.state.message}>
          <SiblingComponent2 />
        </MessageContext.Provider>
      </div>
    );
  }
}

class SiblingComponent2 extends React.Component {
  render() {
    return (
      <div>
        Message from sibling: <MessageContext.Consumer>{message => message}</MessageContext.Consumer>
      </div>
    );
  }
}

ReactDOM.render(
  <SiblingComponent1 />,
  document.getElementById('root')
);

在上面的代码中，我们使用了 Context API 来实现兄弟组件之间的数据传递。在 SiblingComponent1 中，我们通过 MessageContext.Provider 组件将 state 中的 message 传递给了 SiblingComponent2。在 SiblingComponent2 中，我们通过 MessageContext.Consumer 组件获取了 message 的值，并渲染到了页面上。

总结

本文介绍了 React 中常见的组件传值方式，包括父组件向子组件传值、子组件向父组件传值以及兄弟组件之间传值。对于兄弟组件之间的传值问题，我们介绍了 Redux 和 Context API 两种解决方案。希望本文能够帮助读者更好地理解 React 组件之间的数据传递。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653cbdb17d4982a6eb6c1e6f