javascript - Reactjs - 将相同的 Prop 传递给多个子组件

Question

这个问题已经有答案了:

Reactjs: Pass same props to multiple components (1 个回答)

已关闭 5 年前。

我有一个父组件，它有多个子组件。为子组件传递的 props 都是相同的。例如

<TextQuestion questionInfo={this.props.questionInfo} key={this.props.questionInfo.module_question_id} handleChange={this.handleChange} />

<DropDown questionInfo={this.props.questionInfo} key={this.props.questionInfo.module_question_id} handleChange={this.handleChange} />

<Checkbox questionInfo={this.props.questionInfo} key={this.props.questionInfo.module_question_id} handleChange={this.handleChange} />

有没有更有效的方法来做到这一点？可能是返回 Prop 并添加到子组件的函数调用？

Answer 1

const someProps = {
  questionInfo: this.props.questionInfo,
  key: this.props.questionInfo.module_question_id,
  handleChange: this.handleChange,
}

<TextQuestion {...someProps} />
<DropDown {...someProps} />

或者，如果组件是同级组件，您可以将它们放入数组中并执行 map:

{[TextQuestion, DropDown, Checkbox].map((Component, i) => <Component key={i} questionInfo={...} />}