如何在 React 中创建动态道具名称？答案

【问题标题】：How to create a dynamic prop name in React?如何在 React 中创建动态道具名称？
【发布时间】：2016-11-29 14:20:49
【问题描述】：

是否可以动态创建道具名称？例如：

let dynamicPropName = "someString";

<MyComponent dynamicPropName="some value" />

所以在 MyComponent 内部，this.props.someString 存在。

【问题讨论】：

当然，前提是MyComponet 知道如何处理。否则就没用了。
那么解决办法是什么？

标签： reactjs

【解决方案1】：

如果你使用es6，你可以定义动态属性：

let dynamicProps = {"dynamicKey":"someString", "dynamicKey2":"someString"};

或

let someVariable = "xyz";
dynamicProps[someVariable] = value;

然后使用扩展运算符：

<MyComponent {...dynamicProps} />

MyComponent 内部 -

let props = {...this.props};

现在您可以在props 上使用Object.keys 来获取所有动态道具名称。

编辑： 添加示例

class Test extends React.Component {
  
  renderFromProps() {
    return Object.keys(this.props)
    .map((propKey) =>
      <h3>{this.props[propKey]}</h3>
    );
  }
  render() {
    return (
     <div>
      <h1>One way </h1>
      <hr/>
      <h3>{this.props.name}</h3>
      <h3>{this.props.type}</h3>
      <h3>{this.props.value}</h3>
      <hr/>
     <h1> Another way </h1>
      <hr/>
      { this.renderFromProps()}
     </div>
   );
  }
  
}

const dynamicProps = { name:"Test", type:"String", value:"Hi" };

ReactDOM.render(
  <Test {...dynamicProps} />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root">
</div>

【讨论】：

在组件内部，如何获取动态道具 - this.props[someVariable] ？
您可以通过单独的道具名称访问，例如this.props.somveVariable
你能用演示（jsFiddle）开发这个答案吗？
@saawsann 我添加了一个示例来说明。
不是很重要的问题，因为我从你的问题中学到了我需要的东西，但是let props = ...this.props 是为了什么？我得到了SyntaxError: Unexpected token ...

【解决方案2】：

可以通过 spread attribute 和 computed property name 单独使用 JSX 语法来做到这一点：

<MyComponent {...{ [dynamicPropName]: "some value" }} />

【讨论】：

【解决方案3】：

一种内联方式（非常丑陋且不推荐）是使用表达式来定义object：

<input {...(el.required ? {required: true} : {})}>

【讨论】：

您的示例是人为设计的，因为它通常只是 required={el.required}，但对于实际用例，我已经多次使用它，而不仅仅是 React。