web-dev-qa-db-ja.com

React：条件付きでコンポーネントにコンポーネントを渡すインライン

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のプロップを定義する方法を見つけようとしていますが、Childのような値を渡す（または他の何かをする）それでもChild自身のgetDefaultProps()からそのプロップの値を引き出します。

javascriptreactjsinline
47
Matthew Herbst

あなたはあなたのアイデアに近かった。 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}
    />;
  }
});
95
Jim Skerritt

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 documentation： https://facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes

8
Leon Gilyadov

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

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

動作するはずです。

3
Jamal Hussain
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}
      />
    );
  }
});

条件付きで、このような小道具を渡すことができます

0
samuvel johnson

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

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

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

0
AmerllicA