React复用组件时如何根据挂载节点传入不同props值

你设想的在ReactDOM.render方法中传入差异化props实现组件复用的方案完全可行，这是React根组件传参的标准用法，你的代码无法正常运行是存在几处细节错误，和方案本身无关。

• 类组件的render方法中访问props必须通过this.props，你在Display组件render中写的name={props.time}存在两个错误：一是漏写this.无法拿到props，二是子组件HowMuchDay内部读取的prop字段是time，你传参时把prop名写成了name，参数根本无法传递到子组件。
• 代码中引用的h4Style、howStyle两个样式变量未定义，运行时会直接抛出引用错误。
• HowMuchDay组件的构造函数仅执行了super(props)没有其他初始化逻辑，这段构造函数代码可以直接删除，React会自动完成相关处理。

// 统一定义缺失的样式变量，可根据需求自行调整样式值
const h4Style = {
  textAlign: "center",
  fontSize: "1.2rem"
}
const howStyle = {
  padding: "1rem",
  border: "1px solid #eee",
  margin: "1rem 0"
}

class HowMuchDay extends React.Component {
  render() {
    return (
      <div>
        <p>How much a {this.props.time}</p>
        <br />
        <h4 style={h4Style}>{this.props.theValue}</h4>
      </div>
    );
  }
}

class Display extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: "",
      submit: ""
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleInput = this.handleInput.bind(this);
  }

  handleInput(event) {
    this.setState({
      input: event.target.value
    });
  }

  handleSubmit(event) {
    this.setState({
      submit: this.state.input,
      input: ""
    });
    event.preventDefault();
  }

  render() {
    const formStyle = {
      position: "relative",
      textAlign: "center"
    }
    
    return (
      <div style={howStyle}>
        {/* 修正props访问方式和传参名 */}
        <HowMuchDay theValue={this.state.submit} time={this.props.time}/>
        <form onSubmit={this.handleSubmit} style={formStyle}>
          <input
            value={this.state.input}
            onChange={this.handleInput}
            placeholder="how much?"
          />
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}

// 根组件传props的写法完全符合规范
ReactDOM.render(<Display time="day"/>, document.getElementById("day"));
ReactDOM.render(<Display time="week"/>, document.getElementById("week"));
ReactDOM.render(<Display time="month"/>, document.getElementById("month"));

修正后的代码会在id为day、week、month的三个DOM节点下分别挂载独立的Display组件实例，三个实例各自维护输入、提交的状态，互不干扰，分别接收对应的差异化time参数，完全实现组件复用的需求。

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