[解決済み] ReactJSの動的属性

質問

ボタン要素の disabled 属性を動的にインクルード/オミットしたいです。動的な属性値の例はたくさん見ましたが、属性そのものは見ませんでした。私は次のレンダー関数を持っています。

render: function() {
    var maybeDisabled = AppStore.cartIsEmpty() ? "disabled" : "";
    return <button {maybeDisabled}>Clear cart</button>
}

これは、"{"文字のため、パースエラーを投げます。AppStore.cartIsEmpty()の（boolean）結果に基づいてdisabled属性を含む/省略するにはどうすればよいですか？

どのように解決するのですか？

オプションの属性を追加する最もクリーンな方法 ( disabled など) を追加する最もきれいな方法は、現在のところ JSX拡散属性 :

var Hello = React.createClass({
    render: function() {
        var opts = {};
        if (this.props.disabled) {
            opts['disabled'] = 'disabled';
        }
        return <button {...opts}>Hello {this.props.name}</button>;
    }
});

React.render((<div><Hello name="Disabled" disabled='true' />
    <Hello name="Enabled"  />
</div>)
, document.getElementById('container'));

spread属性を使用すると、javascriptオブジェクトのインスタンスを使用して、好きな属性を動的に追加（またはオーバーライド）することができます。上の例では、コードによって disabled キー ( disabled の値) を指定すると disabled プロパティに渡されます。 Hello コンポーネントのインスタンスに渡されます。

のみを使用したい場合は disabled を使いますが。 この の答えはうまくいく。