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

Question

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

 let dynamicPropName = "someString";

<MyComponent dynamicPropName="some value" />

因此在 MyComponent 内部，存在 this.props.someString。

原文由 JoeTidee 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您使用的是 es6 ，则可以定义动态道具：

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

或者

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

然后使用扩展运算符：

 <MyComponent {...dynamicProps} />

在 MyComponent 内部 -

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

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

编辑： 添加了一个示例

 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>

原文由 WitVault 发布，翻译遵循 CC BY-SA 4.0 许可协议