Was ist der beste Weg, um Variablenattribute in JSX zu haben?

Question

Hoffentlich ist meine Frage klar, ich suche hauptsächlich nach einer Möglichkeit, dynamisch Attribute an einen JSX-Eingang anzuhängen.

Ist so etwas möglich ohne die Art zu überschreiben, wie JSX zu JS zu normalem HTML kompiliert?

Answer 1

Sie können ein Objekt mit einem computed property name, initialisieren und JSX Spread Attributes dann zu konvertieren, um es Attribut:

const DemoComponent = ({ variablePropName, variablePropValue }) => { 
    const variableAttribute = { [variablePropName]: variablePropValue }; 
    return (
     <input type="text" { ...variableAttribute } /> 
    ); 
}; 

Answer 2

Sie können es die Art und Weise nicht tun Sie tun. Sie müssen Ihre Attribute als Objekt definieren und diese als gespreizte Attribute übergeben.

Die Eigenschaften des Objekts, das Sie übergeben, werden auf die Requisiten der Komponente kopiert.

Sie können diese mehrfach verwenden oder mit anderen Attributen kombinieren.

var Hello = React.createClass({ 
 
     render: function() { 
 
     
 
     var opt = {} 
 
     opt['placeholder'] = "enter text here"; 
 
     return (<div> 
 
     Hello {this.props.name} 
 
     <div> 
 
     \t <input type="text" {...opt}/> 
 
     </div></div>); 
 
     } 
 
    }); 
 
    
 
    ReactDOM.render(
 
     <Hello name="World" />, 
 
     document.getElementById('container') 
 
    );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script> 
 
<div id="container"> 
 
    <!-- This element's contents will be replaced with your component. --> 
 
</div>

DOCS