小编典典

如何在React中创建一个动态的prop名称?

reactjs

是否可以动态创建道具名称?例如:

let dynamicPropName = "someString";

<MyComponent dynamicPropName="some value" />

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


阅读 564

收藏
2020-07-22

共1个答案

小编典典

如果使用 es6 ,则可以定义动态prop:

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

要么

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

然后使用传播运算符:

<MyComponent {...dynamicProps} />

在MyComponent内部-

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

现在,您可以使用Object.keyson 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>
2020-07-22