React中能否将组件状态值传递至返回JSX的其他组件？

当然可以啦！在React里传递组件的state到其他组件是非常常见的需求，最常用的方式就是通过props来传递，要是涉及到跨多层组件或者非父子关系的组件，还可以用Context API或者状态管理库（比如Redux），不过先从最基础的场景给你举例说明~

1. 直接通过Props传递给子组件 #

这是最基础的场景，比如你的Header组件要把state里的value传给它的子组件Conteneur，只需要在渲染子组件时把state作为props传递过去就行。

先补全并修改你的Header组件代码：

import React from 'react';
import Conteneur from './Conteneur';

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    // 补全输入框值的更新逻辑
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    event.preventDefault();
    console.log('提交的值:', this.state.value);
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            value={this.state.value}
            onChange={this.handleChange}
            placeholder="输入内容..."
          />
          <button type="submit">提交</button>
        </form>
        {/* 把state里的value作为props传给Conteneur组件 */}
        <Conteneur inputValue={this.state.value} />
      </div>
    );
  }
}

export default Header;

然后Conteneur组件就可以通过props接收这个值并展示：

import React from 'react';

function Conteneur(props) {
  // 接收Header传递过来的inputValue
  return (
    <div className="conteneur">
      <p>Header输入的内容是：{props.inputValue}</p>
    </div>
  );
}

export default Conteneur;

2. 状态提升：传递给非父子关系的组件 #

如果要把Header的state传递给和它同级的组件（比如第三个组件Footer），或者跨多层组件的话，推荐使用状态提升——把state移到它们共同的父组件（比如App组件）里，然后父组件把状态和更新状态的方法通过props传递给需要的子组件。

比如App组件作为父组件：

import React from 'react';
import Header from './Header';
import Footer from './Footer';
import Conteneur from './Conteneur';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { inputValue: '' };
    this.updateInputValue = this.updateInputValue.bind(this);
  }

  updateInputValue(newValue) {
    this.setState({ inputValue: newValue });
  }

  render() {
    return (
      <div className="app">
        {/* 把更新方法传给Header，让它可以修改父组件的state */}
        <Header onInputChange={this.updateInputValue} currentValue={this.state.inputValue} />
        {/* 把state值传给Conteneur和Footer */}
        <Conteneur inputValue={this.state.inputValue} />
        <Footer displayValue={this.state.inputValue} />
      </div>
    );
  }
}

export default App;

修改后的Header组件，不再自己维护state，而是通过props接收值和更新方法：

import React from 'react';

class Header extends React.Component {
  handleChange(event) {
    // 调用父组件传递的方法更新状态
    this.props.onInputChange(event.target.value);
  }

  handleSubmit(event) {
    event.preventDefault();
    console.log('提交的值:', this.props.currentValue);
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            value={this.props.currentValue}
            onChange={this.handleChange.bind(this)}
            placeholder="输入内容..."
          />
          <button type="submit">提交</button>
        </form>
      </div>
    );
  }
}

export default Header;

然后第三个组件Footer就可以接收并展示这个值：

import React from 'react';

function Footer(props) {
  return (
    <footer>
      <p>页面底部展示：{props.displayValue}</p>
    </footer>
  );
}

export default Footer;

3. 使用Context API（适合跨多层组件传递） #

如果你的组件层级很深，用props逐层传递太麻烦，可以用React的Context API来全局共享状态。这种方式适合不需要频繁更新的全局状态，或者多层组件需要访问同一个状态的场景。

首先创建一个Context：

// InputContext.js
import React from 'react';

const InputContext = React.createContext('');

export default InputContext;

然后在父组件（比如App）里用Provider包裹子组件，提供状态和更新方法：

import React from 'react';
import InputContext from './InputContext';
import Header from './Header';
import Conteneur from './Conteneur';
import Footer from './Footer';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { inputValue: '' };
    this.updateInputValue = (newValue) => {
      this.setState({ inputValue: newValue });
    };
  }

  render() {
    // 把状态和更新方法放进context的value里
    const contextValue = {
      value: this.state.inputValue,
      updateValue: this.updateInputValue
    };

    return (
      <InputContext.Provider value={contextValue}>
        <div className="app">
          <Header />
          <Conteneur />
          <Footer />
        </div>
      </InputContext.Provider>
    );
  }
}

export default App;

修改Header组件，通过contextType获取Context：

import React from 'react';
import InputContext from './InputContext';

class Header extends React.Component {
  handleChange(event) {
    // 从Context里获取更新方法
    this.context.updateValue(event.target.value);
  }

  handleSubmit(event) {
    event.preventDefault();
    console.log('提交的值:', this.context.value);
  }

  // 类组件需要声明contextType来获取Context
  static contextType = InputContext;

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit.bind(this)}>
          <input
            type="text"
            value={this.context.value}
            onChange={this.handleChange.bind(this)}
            placeholder="输入内容..."
          />
          <button type="submit">提交</button>
        </form>
      </div>
    );
  }
}

export default Header;

函数组件的Conteneur可以用useContext钩子快速获取Context：

import React, { useContext } from 'react';
import InputContext from './InputContext';

function Conteneur() {
  const { value } = useContext(InputContext);
  return (
    <div className="conteneur">
      <p>Header输入的内容是：{value}</p>
    </div>
  );
}

export default Conteneur;

内容的提问来源于stack exchange，提问作者JsNinja