ReactJSの動的属性

ボタン要素の無効化された属性を動的に含める/除外したいのですが。動的属性値の例はたくさんありますが、属性自体の例はありません。次のレンダリング機能があります。

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

これは、「{」文字が原因で解析エラーをスローします。AppStore.cartIsEmpty（）の結果（ブール値）に基づいて無効化された属性を含めたり、除外したりするにはどうすればよいですか？

オプションの属性（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'));

スプレッド属性を使用すると、JavaScriptオブジェクトインスタンスを使用して、必要な属性を動的に追加（またはオーバーライド）できます。上記の例では、プロパティがコンポーネントインスタンスに渡されると、コードがdisabledキー（disabledこの場合は値）を作成します。disabledHello

disabledただし、使用したいだけの場合は、この答えはうまくいきます。

ブール値をdisabled属性に渡すことができます。

render: function() {
    return <button disabled={AppStore.cartIsEmpty()}>Clear cart</button>
}

私はReact 16を使用していますが、これは私にとってはうまくいきます（boolあなたのテストはどこですか）：

<fieldset {...(bool ? {disabled:true} : {})}>

基本的に、テスト（bool）に基づいて、属性を持つオブジェクトを返すか、空のオブジェクトを返します。

また、複数の属性を追加または省略する必要がある場合は、次のようにすることができます。

<fieldset {...(bool ? {disabled:true} : {})} {...(bool ? {something:'123'} : {})}>

より複雑な属性管理については、JSXの外部で属性を使用して（または使用せずに）オブジェクトをプレハブすることをお勧めします。

任意の属性で機能する動的属性を実行するよりクリーンな方法は、

function dynamicAttributes(attribute, value){
  var opts = {};
  if(typeof value !== 'undefined' && value !== null) {
    opts['"'+attribute+'"'] = value;
    return opts;
  }
  return false;
};

次のように反応コンポーネントを呼び出します

<ReactComponent {...dynamicAttributes("disabled",false)}
{...dynamicAttributes("data-url",dataURL)}
{...dynamicAttributes("data-modal",true)} />

チップ ：

1. あなたは持っている可能性がありdynamicAttributes、それはすべてのコンポーネントを渡ってそれを使用するために共通の場所/ユーティリティおよびインポートで機能を

2. null動的属性をレンダリングしないように値を渡すことができます

ドキュメントでこれに似たものを見つけることができます。

https://facebook.github.io/react/docs/transferring-props.html

あなたの場合、このようなものになる可能性があります

function MyComponent(props) {
    let { disabled, ...attrs } = props;
    if (disabled) {
        // thus, it will has the disabled attribute only if it
        // is disabled
        attrs = {
            ...attrs,
            disabled: true
        }
    };

    return (
        <button {...attrs}>MyLabel</button>
    )
}

このコードはES6を使用していますが、私はあなたが考えを理解していると思います。

このコンポーネントに他の多くの属性を渡すことができ、それでも機能するので、これはクールです。

私が使用したバージョンは：

<button disabled={disabled ? 'disabled' : undefined}>
    Click me (or dont)
</button>

シンプルでクリーンな方法

<button {...disabled && {disabled: true}}>Clear cart</button>

障害者はこのような小道具から来る必要があります

<MyComponent disabled />

受け入れられているソリューションよりもはるかにクリーンなのは、AnilRedshiftが言及したソリューションですが、これについてはさらに詳しく説明します。

簡単に言うと、HTML属性には名前と値があります。省略形として、「無効」、「複数」などにのみ名前を使用できます。ただし、長い形式も引き続き機能し、Reactが推奨される方法で機能できるようにします。

disabled={disabled ? 'disabled' : undefined} 最も読みやすいソリューションです。

まず、簡単に確認できます

<button disabled={true}>Button 1</button>
<button disabled={false}>Button 2</button>

注：**無効な値は文字列ではなく、ブール値である必要があります。

今ダイナミックのために。あなたは単に書くことができます

<button type="button" disabled={disable}  
        onClick={()=>this.setSelectValue('sms')} >{this.state.sms}</button>

ご覧のとおり、無効なプロパティを使用しており、中かっこで囲んで、ローカル変数/状態変数にすることができます。変数にdisableはtrue / falseの値が含まれます。

これは機能しますが、無効にした場合の問題は、ブール値を単純に設定できないことです。

if(AppStore.cartIsEmpty()){
  return "<button disabled>Clear cart</button>"
}
else
{
  return "<button>Clear cart</button>"
}