在React中如何从JSON动态创建参数？

没问题，咱们可以通过遍历JSON数据里的nextTag数组来动态生成绑定对应点击事件的按钮，不用再硬编码question2和question3，这样后续nextTag里新增标签时，组件能自动适配。

基础实现代码 #

先看修改后的组件代码，核心是用map遍历数组动态渲染：

const data = {
  content: {
    body: [
      {
        nextTag: ["question2", "question3"],
      },
    ],
  },
};

// 你的组件部分修改如下
{({ destinations }) => (
  <div className="buttonContainer">
    {data.content.body[0].nextTag.map((tag) => (
      <button 
        key={tag}  {/* React列表渲染必须加唯一key */}
        onClick={destinations[tag]}
      >
        {/* 根据tag匹配按钮文本，这里对应你的Yes/No需求 */}
        {tag === "question2" ? "Yes" : "No"}
      </button>
    ))}
  </div>
)}

关键细节说明 #

• 动态事件绑定：用destinations[tag]替代原来的解构硬编码，通过tag名称直接从destinations对象中获取对应的点击事件，灵活适配不同的tag。
• 遍历渲染：通过map方法遍历nextTag数组，每个元素生成一个按钮，避免重复代码。
• key属性：必须给动态生成的列表项加唯一key，这里用tag作为key（因为每个tag是唯一的），符合React的性能优化要求。

进阶优化：按钮文本也动态配置 #

如果后续按钮文本（比如"Yes"/"No"）也想从JSON里动态控制，可以扩展你的data结构，给每个tag关联对应的文本：

// 修改后的JSON数据
const data = {
  content: {
    body: [
      {
        nextTag: [
          { tag: "question2", text: "Yes" },
          { tag: "question3", text: "No" }
        ],
      },
    ],
  },
};

// 对应修改组件渲染逻辑
{({ destinations }) => (
  <div className="buttonContainer">
    {data.content.body[0].nextTag.map(({ tag, text }) => (
      <button 
        key={tag} 
        onClick={destinations[tag]}
      >
        {text}
      </button>
    ))}
  </div>
)}

这样整个按钮的事件和文本都由JSON数据驱动，扩展性拉满，后续新增按钮只需要修改data就行，不用动组件代码。

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