如何在 React 中创建动态道具名称? [英] How to create a dynamic prop name in React?

问题描述

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

let dynamicPropName = "someString";<MyComponent dynamicPropName="某个值"/>

所以在 MyComponent 中，this.props.someString 存在.

解决方案

如果你使用的是es6，你可以定义动态道具:

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

或

let someVariable = "xyz";dynamicProps[someVariable] = 值；

然后使用展开运算符:

在 MyComponent 内部 -

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

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

添加了一个例子

class Test extends React.Component {renderFromProps() {返回 Object.keys(this.props).map((propKey) =><h3>{this.props[propKey]}</h3>);}使成为() {返回 (<div><h1>一种方式 </h1><小时/><h3>{this.props.name}</h3><h3>{this.props.type}</h3><h3>{this.props.value}</h3><小时/><h1>另一种方式 </h1><小时/>{ this.renderFromProps()}

);}}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">

Is it possible to create the name of a prop dynamically? For example:

let dynamicPropName = "someString";

<MyComponent dynamicPropName="some value" />

so that inside MyComponent, this.props.someString exists.

解决方案

If you are using es6, you can define the dynamic prop:

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

or

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

then use the spread operator:

<MyComponent {...dynamicProps} />

Inside MyComponent -

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

Now you can use Object.keys on props to get all dynamic prop names.

Edit: Added an example

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>

这篇关于如何在 React 中创建动态道具名称?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！