React: nội tuyến có điều kiện chuyển prop tới component

Tôi muốn biết liệu có cách nào tốt hơn để chuyển một mệnh đề có điều kiện hơn là sử dụng câu lệnh if.

Ví dụ, ngay bây giờ tôi có:

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

Có cách nào để viết điều này mà không cần câu lệnh if không? Tôi đang suy nghĩ điều gì đó dọc theo dòng của một loại câu lệnh nội tuyến-if-trong JSX:

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

Tóm lại : Tôi đang cố gắng tìm cách xác định một điểm hỗ trợ Child, nhưng chuyển một giá trị (hoặc làm điều gì đó khác) để Childvẫn lấy giá trị của điểm hỗ trợ đó từ giá trị Childcủa chính nó getDefaultProps().

Bạn đã kết thúc với ý tưởng của mình. Nó chỉ ra rằng việc chuyển undefinedcho một chỗ dựa cũng giống như không bao gồm nó, điều này vẫn sẽ kích hoạt giá trị chống đỡ mặc định. Vì vậy, bạn có thể làm một cái gì đó như sau:

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

Thêm toán tử spread vào this.props.editable:

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

nên làm việc.

Xác định propsbiến:

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

Và sau đó sử dụng nó trong JSX:

<Child {...props} />

Đây là một giải pháp trong mã của bạn:

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

Nguồn, tài liệu React: https://facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes

Trên thực tế, nếu prop của bạn là boolean thì không cần thực hiện điều kiện nhưng nếu bạn muốn thêm prop bằng điều kiện nội tuyến, bạn nên viết như dưới đây:

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

Hy vọng nó không làm bạn bối rối. các {...phương tiện đó là hành lây lan như truyền đạo cụ tồn tại: {...props}và editable &&phương tiện nếu editablelà truecác { editable: editableOpts }đối tượng sẽ thực hiện và với {...chúng ta sẽ làm cho một đối tượng mới như nó: {...{ editable: editableOpts }}nó có nghĩa editable={editableOpts}nhưng nếu this.porps.editablelà sự thật.

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

Điều này sẽ vượt qua các đạo cụ nếu chúng được xác định. Các đạo cụ khác không được thông qua. Trong câu trả lời khác, đạo cụ vẫn được chuyển nhưng giá trị undefinedvẫn có nghĩa là đạo cụ đang được chuyển.

Ngoài ra, bạn có thể thử cách tay ngắn này

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