如何在React自定义Button组件上正确显示传入的name属性值

问题根因 #

你自定义的Button组件固定读取自身state中硬编码为Hey的name值，没有使用父组件App传入的name属性，因此所有按钮显示内容固定。

方案1（推荐）：直接读取props，移除不必要的内部state #

如果按钮文本不需要在Button组件内部修改，直接读取父组件传入的props即可，无需维护内部state，减少不必要的状态管理开销，修改后的Button组件代码如下：

import React from 'https://cdn.skypack.dev/react';

class Button extends React.Component {
  render() {
    return (
      <button>{this.props.name}</button>
    );
  }
}
export default Button;

方案2：若需要将name存入内部state使用 #

如果后续需要在Button组件内部修改按钮文本，需要在初始化state时读取传入的props值，而非硬编码，修改后的代码如下：

import React from 'https://cdn.skypack.dev/react';

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: props.name // 初始化时读取父组件传入的name值
    };
  }

  render() {
    return (
      <button>{this.state.name}</button>
    );
  }
}
export default Button;

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