Wie erstelle ich einen dynamischen Prop-Namen in React?

Question

Ist es möglich, den Namen einer Requisite dynamisch zu erstellen? Zum Beispiel:

let dynamicPropName = "someString"; 

<MyComponent dynamicPropName="some value" /> 

so dass innerhalb von MyComponent this.props.someString existiert.

Answer 1

Wenn Sie es6 verwenden, können Sie die dynamische Stütze definieren:

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

oder

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

dann den Operator Verbreitung verwenden:

<MyComponent {...dynamicProps} /> 

Innen MyComponent -

let props = ...this.props; 

Jetzt können Sie Object.keys unter props verwenden, um alle dynamischen Propnamen zu erhalten.

Edit: Added ein Beispiel

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>