React.js技术问询：如何将组件state值作为props传递给子组件

看起来你已经走在正确的路子上了！咱们一步步拆解你这段代码里的实现，再补充些实用的优化和注意点：

你已经做对的核心操作 #

在你的App组件中，已经完成了父组件state传递给子组件props的关键步骤：

<Btn name={this.state.clicks}/>

这里把父组件App的state.clicks值，通过name这个props传递给了子组件Btn——这就是父组件向子组件传递动态数据的基础逻辑，完全符合React单向数据流的设计。

子组件如何接收并使用Props #

你的Btn组件构造函数已经接收了props参数，接下来只要在子组件的render方法里直接调用this.props.name，就能拿到父组件传过来的值。咱们把Btn组件补全：

class Btn extends React.Component {
  constructor(props) {
    super(props);
    // 如果子组件不需要维护自己的状态，这部分可以直接省略
    this.state = { prop: "xyz" };
  }

  render() {
    // 直接使用父组件传递的props值
    return <div>Received value: {this.props.name}</div>;
  }
}

这样一来，每次父组件的clicks state更新时，子组件的props.name会自动同步，触发子组件重新渲染展示最新值。

优化点：事件绑定的性能提升 #

你当前在onClick里用this.increment.bind(this)，这种写法会在组件每次render时创建新的函数实例，小场景下影响不大，但可以优化成两种更高效的方式：

方式1：在构造函数中提前绑定 #

class App extends React.Component {
  constructor() {
    super();
    this.state = { clicks: 0 };
    // 提前绑定上下文，避免每次render重复创建函数
    this.increment = this.increment.bind(this);
  }

  render() {
    return (
      <div>
        <button onClick={this.increment}>Click it</button>
        <Btn name={this.state.clicks}/>
        <Btn name="sssssss"/>
        <Btn name="aaaaaaa"/>
      </div>
    );
  }

  increment() {
    this.setState({ clicks: this.state.clicks + 1 });
  }
}

方式2：用箭头函数定义方法 #

利用箭头函数自动绑定组件上下文的特性，省去手动bind的步骤：

class App extends React.Component {
  constructor() {
    super();
    this.state = { clicks: 0 };
  }

  render() {
    return (
      <div>
        <button onClick={this.increment}>Click it</button>
        <Btn name={this.state.clicks}/>
        <Btn name="sssssss"/>
        <Btn name="aaaaaaa"/>
      </div>
    );
  }

  // 箭头函数自动绑定this到组件实例
  increment = () => {
    this.setState({ clicks: this.state.clicks + 1 });
  }
}

重要注意事项 #

• 子组件绝对不能直接修改父组件传递过来的props，props是只读的。如果子组件需要触发父组件state更新，得让父组件传递一个回调函数给子组件，子组件调用这个函数来通知父组件更新状态。
• 父组件state更新时，所有接收该state作为props的子组件都会自动重新渲染，这是React单向数据流的核心特性，也是组件间同步数据的关键。

最后附上完整可运行的代码示例：

class App extends React.Component {
  constructor() {
    super();
    this.state = { clicks: 0 };
    this.increment = this.increment.bind(this);
  }

  render() {
    return (
      <div>
        <button onClick={this.increment}>Click it</button>
        <Btn name={this.state.clicks}/>
        <Btn name="sssssss"/>
        <Btn name="aaaaaaa"/>
      </div>
    );
  }

  increment() {
    this.setState({ clicks: this.state.clicks + 1 });
  }
}

class Btn extends React.Component {
  constructor(props) {
    super(props);
    this.state = { prop: "xyz" };
  }

  render() {
    return (
      <div style={{ margin: "10px 0" }}>
        Props value: {this.props.name}
      </div>
    );
  }
}

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

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