React中如何避免Material UI组件出现重复Props问题？

别担心，完全不需要彻底重构代码！你遇到的"No duplicate props allowed"错误原因很直白：React不允许给组件传递同名的props，你在父组件里给<EditTaskDialog>连续传了三个onChange，这肯定会触发报错。

只需要把这三个回调用不同的props名称区分开就行，刚好你的子组件里已经在使用onChangeText、onChangeDate、onChangeSelect这些命名了，直接对应传递就好：

第一步：修改父组件的props传递 #

把重复的onChange改成对应子组件期望的名称：

render() {
  const actionsEdit = [ 
    <FlatButton 
      label="Edit" 
      primary={true} 
      keyboardFocused={true} 
      onClick={e => this.handleSubmitTask(e)} 
    />, 
    <FlatButton 
      label="Cancel" 
      primary={true} 
      onClick={this.handleCloseEditDialog} 
    /> 
  ];
  return ( 
    <div> 
      <EditTaskDialog 
        open={this.state.openEdit} 
        actions={actionsEdit} 
        nameTask={this.state.nameTask} 
        priority={this.state.priority} 
        deadline={this.state.deadline} 
        onChangeText={this.handleTextFieldChange} {/* 替换重复的onChange */}
        onChangeDate={this.handleChangeDate}       {/* 替换重复的onChange */}
        onChangeSelect={this.handleChangeSelectField} {/* 替换重复的onChange */}
      /> 
    </div> 
  );
}

另外提个小优化：e => this.handleTextFieldChange(e)这种写法完全可以简化成直接传this.handleTextFieldChange，因为React会自动把event参数传递过去，这样代码更简洁。

第二步：确认子组件的props接收 #

看你的子组件代码，已经在正确使用this.props.onChangeText、this.props.onChangeDate、this.props.onChangeSelect了，所以这部分不需要修改，保持原样就行：

render() {
  return ( 
    <form> 
      <Dialog title="Edit your Task" open={this.props.open} actions={this.props.actions}> 
        <TextField 
          floatingLabelText="Task" 
          value={this.props.nameTask} 
          errorText={this.state.nameTaskError} 
          onChange={this.props.onChangeText} 
          onKeyPress={this.handleKeyPress}
        /> 
        <DatePicker 
          floatingLabelText="Deadline" 
          value={this.props.deadline} 
          onChange={this.props.onChangeDate} 
        /> 
        <SelectField 
          floatingLabelText="Priority" 
          value={this.props.priority} 
          onChange={this.props.onChangeSelect}
        > 
          <MenuItem value="High" primaryText="High" /> 
          <MenuItem value="Medium" primaryText="Medium" /> 
          <MenuItem value="Low" primaryText="Low" /> 
        </SelectField> 
      </Dialog> 
    </form> 
  );
}

这样修改后，props的传递清晰无冲突，错误就会消失，而且代码结构也更易读，每个回调的用途一目了然。

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