JSXで変数属性を使用する最も良い方法は何ですか？

Question

うまくいけば私の質問は明らかですが、私は主にJSX入力に属性を動的に付加する方法を探しています。

<input type="text" {variableAttribute}={anotherVariable} /> 

JSXをJSと通常のHTMLにコンパイルする方法をオーバーライドしないと、これは可能でしょうか？

Answer 1

あなたはcomputed property nameでオブジェクトを初期化して、属性に変換するJSX Spread Attributesを使用することができます。

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

Answer 2

あなたはそれをあなたがやっている方法を行うことはできません。あなたはあなたの属性をオブジェクトとして定義し、それをspread属性として渡す必要があります。あなたが渡すオブジェクトの

プロパティは、コンポーネントの小道具にコピーされます。

あなたは、この複数回使用したり、他の属性とそれを組み合わせることができます。

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