如何为React组件props中的answerComp添加属性？

你无法直接修改已有的React元素属性，因为React元素是不可变对象。要给props.answerComp添加key和name属性，需使用React.cloneElement方法克隆该元素，并传入新属性：

{answers.map((item, id) => {
  const clonedRadio = React.cloneElement(props.answerComp, {
    key: id + 1,
    name: props.questId
  });
  setAnswers([...answers, clonedRadio]);
})}

补充说明 #

• React.cloneElement会基于传入的原元素创建新元素，自动合并你指定的新属性（若原元素已有同名属性，新属性会覆盖原属性）。
• 直接修改props.answerComp.key无效，因为React元素的属性是只读的，控制台打印出的props是内部存储对象，手动修改不会生效，必须通过克隆生成新元素。

另外，循环中更新状态建议用函数式更新，避免闭包导致的状态不一致问题，优化后代码：

{answers.map((item, id) => {
  setAnswers(prevAnswers => {
    const clonedRadio = React.cloneElement(props.answerComp, {
      key: prevAnswers.length + 1, // 用当前数组长度生成key更可靠
      name: props.questId
    });
    return [...prevAnswers, clonedRadio];
  });
})}

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