web-dev-qa-db-ja.com

Reactコンポーネントに条件付きで属性を追加する方法

特定の条件が満たされた場合にのみReactコンポーネントに属性を追加する方法はありますか？

レンダリング後のajax呼び出しに基づいて必須およびreadOnly属性をフォーム要素に追加することになっていますが、readOnly = "false"は属性を完全に省略するのと同じではないため、解決方法がわかりません。

以下の例は私が欲しいものを説明するべきですが、うまくいきません（Parse Error：Unexpected identifier）。

var React = require('React');

var MyOwnInput = React.createClass({
    render: function () {
        return (
            <div>
                <input type="text" onChange={this.changeValue} value={this.getValue()} name={this.props.name}/>
            </div>
        );
    }
});

module.exports = React.createClass({
    getInitialState: function () {
        return {
            isRequired: false
        }
    },
    componentDidMount: function () {
        this.setState({
            isRequired: true
        });
    },
    render: function () {
        var isRequired = this.state.isRequired;

        return (
            <MyOwnInput name="test" {isRequired ? "required" : ""} />
        );
    }
});
javascriptreactjs
358
Remi Sture

明らかに、特定の属性については、渡された値が信頼できない場合、Reactはその属性を省略するのに十分なほどインテリジェントです。例えば：

var InputComponent = React.createClass({
    render: function() {
        var required = true;
        var disabled = false;

        return (
            <input type="text" disabled={disabled} required={required} />
        );
    }
});

結果は次のようになります。

<input type="text" required data-reactid=".0.0">
372
juandemarco

別の選択肢をそこに投げ出すだけですが、 @ juandemarcoの 答えは通常正しいです。

好きなようにオブジェクトを作成します。

var inputProps = {
  value: 'foo',
  onChange: this.handleChange
};

if (condition) inputProps.disabled = true;

必要に応じて他の小道具も渡して、スプレッドでレンダリングします。

<input 
    value="this is overridden by inputProps" 
    {...inputProps} 
    onChange={overridesInputProps}
 />
292
FakeRainBrigand

これは Bootstrap の Button を使った React-Bootstrap の使用例です。

var condition = true;

return (
  <Button {...(condition ? {bsStyle: 'success'} : {})} />
);

条件に応じて、{bsStyle: 'success'}または{}が返されます。その後、展開演算子は、返されたオブジェクトのプロパティをButtonコンポーネントに展開します。偽の場合、返されたオブジェクトにはプロパティが存在しないため、コンポーネントには何も渡されません。

下記の@Andy Polhillのコメントに基づく代替方法：

var condition = true;

return (
  <Button bsStyle={condition ? 'success' : undefined} />
);

唯一の小さな違いは、2番目の例の内部コンポーネント<Button/>のpropsオブジェクトは、キーbsStyleを持ち、その値はundefinedであることです。

196
Arman Yeghiazaryan

パーティーに遅れた。これが代替案です。

var condition = true;

var props = {
  value: 'foo',
  ...( condition && { disabled: true } )
};

var component = <div { ...props } />;

またはそのインラインバージョン

var condition = true;

var component = (
  <div
    value="foo"
    { ...( condition && { disabled: true } ) } />
);
55
Season

コンポーネント（の一部）の追加/削除に使用されるのと同じショートカットを使用できます（{isVisible && <SomeComponent />}）。

class MyComponent extends React.Component {
  render() {
    return (
      <div someAttribute={someCondition && someValue} />
    );
  }
}
14
GijsjanB

これが私のやり方です。

条件付き ：

  <Label
    {...{
      text: label,
      type,
      ...(tooltip && { tooltip }),
      isRequired: required
    }}
  />

条件付きでない場合は（私の意見では）読みやすくなるので、私はまだ通常の方法でプロップを渡す方法を使用することを好みます。

条件なし ：

 <Label text={label} type={type} tooltip={tooltip} isRequired={required} />
13
Tony Tai Nguyen

パーティーに遅れた。

条件が真の場合、（aria- *またはdata- *を使用して）カスタムプロパティを追加したいとしましょう。

{...this.props.isTrue && {'aria-name' : 'something here'}}

条件が真の場合、スタイルプロパティを追加したいとしましょう。

{...this.props.isTrue && {style : {color: 'red'}}}
8
Mina Luke

もしあなたがes6を使うならば、あなたは単にこのように書くことができます。

// first, create a wrap object.
const wrap = {
    [variableName]: true
}
// then, use it
<SomeComponent {...{wrap}} />
6
snyh

あなたの状態はajaxの呼び出しの後に変化し、そして親コンポーネントは再レンダリングされるので、これはうまくいくはずです。

render : function () {
    var item;
    if (this.state.isRequired) {
        item = <MyOwnInput attribute={'whatever'} />
    } else {
        item = <MyOwnInput />
    }
    return (
        <div>
            {item}
        </div>    
    );
}
4
Michael Parker

この記事を考慮して https://facebook.github.io/react/tips/if-else-in-JSX.html あなたはこのようにあなたの問題を解決することができます

if (isRequired) {
  return (
    <MyOwnInput name="test" required='required' />
  );
}
return (
    <MyOwnInput name="test" />
);
1
Viktor Kireev

Reactでは、コンポーネントだけでなく、props、className、idなどの属性も条件付きでレンダリングできます。

Reactでは、条件付きでコンポーネントをレンダリングするのを助けることができる "Ternary operator"を使うことはとても良い習慣です。

例は、Componentとそのスタイルの属性を条件付きでレンダリングする方法も示しています。

これが簡単な例です。

class App extends React.Component {
  state = {
    isTrue: true
  };

  render() {
    return (
      <div>
        {this.state.isTrue ? (
          <button style={{ color: this.state.isTrue ? "red" : "blue" }}>
            I am rendered if TRUE
          </button>
        ) : (
          <button>I am rendered if FALSE</button>
        )}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>
0
Juraj Sarissky