反応：インラインで条件付きで小道具をコンポーネントに渡す

ifステートメントを使用するよりも条件付きで小道具を渡すためのより良い方法があるかどうか知りたいです。

たとえば、今私は持っています：

var parent = React.createClass({
  propTypes: {
    editable: React.PropTypes.bool.isRequired,
    editableOpts: React.PropTypes.shape({...})
  },
  render: function() {
    if(this.props.editable) {
      return (
        <Child editable={this.props.editableOpts} />
      );
    } else {
      // In this case, Child will use the editableOpts from its own getDefaultProps()
      return (
        <Child />
      );
    }
  }
});

if文なしでこれを書く方法はありますか？私は、JSXの一種のインラインifステートメントに沿って何かを考えていました。

var parent = React.createClass({
  propTypes: {
    editable: React.PropTypes.bool.isRequired,
    editableOpts: React.PropTypes.shape({...})
  },
  render: function() {
    return (
      <Child 
        {this.props.editable ? editable={this.props.editableOpts} : null} 
      />
    );
  }
});

まとめ：の小道具を定義する方法を見つけようとしていますが、その小道具の値を自分自身からプルするChildような値を渡します（または何か他のことをします）。ChildChildgetDefaultProps()

あなたは自分の考えに近かった。undefined小道具を渡すことは、それをまったく含まないことと同じであり、それでもデフォルトの小道具値がトリガーされます。したがって、次のようなことができます。

var parent = React.createClass({
  propTypes: {
    editable: React.PropTypes.bool.isRequired,
    editableOpts: React.PropTypes.shape({...})
  },
  render: function() {
    return <Child 
      editable={this.props.editable ?
                  this.props.editableOpts : 
                  undefined}
    />;
  }
});

スプレッド演算子をthis.props.editable：に追加します

<Child {...(this.props.editable ? {editable: {this.props.editableOpts}} : {})} >

動作するはずです。

props変数の定義：

let props = {};
if (this.props.editable){
  props.editable = this.props.editable;
}

そして、JSXでそれを使用します。

<Child {...props} />

コードの解決策は次のとおりです。

var parent = React.createClass({
  propTypes: {
    editable: React.PropTypes.bool.isRequired,
    editableOpts: React.PropTypes.shape({...})
  },
  render: function() {
    let props = {};
    if (this.props.editable){
      props.editable = this.props.editable;
    }
    return (
      <Child {...props} />
    );
  }
});

ソース、Reactドキュメント：https：//facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes

実際、小道具がブール値の場合、条件を実装する必要はありませんが、インライン条件で小道具を追加する場合は、次のように記述します。

const { editable, editableOpts } = this.props;
return (
  <Child {...(editable && { editable: editableOpts } )} />
);

それがあなたを混乱させないことを願っています。{...それが広がり存在していた小道具を渡すような演算子であることを意味：{...props}とeditable &&場合の手段editableであるオブジェクトを作るとしてます、我々はそれのような新しいオブジェクトを作成します：それは意味していることが、場合事実です。true{ editable: editableOpts }{...{...{ editable: editableOpts }}editable={editableOpts}this.porps.editable

var parent = React.createClass({
  propTypes: {
    editable: React.PropTypes.bool.isRequired,
    editableOpts: React.PropTypes.shape({...})
  },
  render: function() {
    return (
      <Child 
        {...(this.props.editable && {editable=this.props.editableOpts})} 
      />
    );
  }
});

小道具が定義されている場合、これは小道具を渡します。それ以外の場合、小道具は渡されません。他の答えでは、小道具はまだ渡されていますが、値はundefined小道具が渡されていることを意味します。

また、この速記方法を試すことができます

 <Child {...(this.props.editable  && { editable: this.props.editableOpts })} />