ReactJSをコンポーネント名とその小道具でレンダリングするには？

Question

作業バージョン

// Load from defined component 
const TextField = require('textfield'); 

render: function() { 
    <div> 
    <TextField label='sample' defaultValue='default' placeholder='type your value' /> 
    </div> 
} 

改良版が、

ワーキングそして、私は非常に多くのTextFieldを持っているので、私はより一般的な方法で小道具を作成するために、自分のコードをリファクタリングません。その後、私は動作します。このようなもののようなものを期待していますが、それはしません：私も試した

render: function() { 
    <div> 
    // This not working but raised error: Objects are not valid as a React child (found: object with keys: {label, defaultValue, placeholder} 
    React.createElement(TextField, this._getPropsForField('sample')) 
    </div> 
}, 

_getPropsForField: function(fieldName) { 
    // Initialize data for fieldName, but return a mock for now 
    return { 
    label: 'sample', 
    defaultValue: 'default', 
    placeholder: 'placeholder' 
    }; 
} 

：

TextField(this._getPropsForField()) 

しかし、それは同じエラーで動作しませんでした。

ご協力いただきありがとうございます。

Answer 1

JSXの特別なユースケースを持つspread演算子を使用して、一連の小道具を渡すことができます。フルJSXを行く

<TextField { ...(_getPropsForField('field')) } /> 

Example

Answer 2

は良いですが、この行：

React.createElement(TextField, this._getPropsForField('sample')) 

あなたはJSXを逃れるために{ }括弧が欠落しています。彼らとそれはまた、動作するはずです：

{React.createElement(TextField, this._getPropsForField('sample'))} 

Answer 3

を私はずっとJSXを知らないが、私はあなたが（@wintveltが指摘するように、あなたは{}内でそれをラップする必要がある）<div>内React.createElement(TextField, {})を置くことはできないと思います。はい、 `` ...魔法を行い

render: -> 
    React.DOM.div 
    null 
    React.createElement TextField, @_getPropsForField('sample')