반응 : 조건부로 prop을 컴포넌트에 전달

if 문을 사용하는 것보다 조건부로 prop을 전달하는 더 좋은 방법이 있는지 알고 싶습니다.

예를 들어, 지금은 다음과 같습니다.

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에서 inline-if-statement 유형의 라인을 따라 무언가를 생각하고 있습니다.

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

마무리하려면 : 나는 prop for를 정의하는 방법을 찾으려고 노력하고 Child있지만 값을 전달하거나 다른 것을 수행하여 Child여전히 Child자신 의 값을 가져옵니다 getDefaultProps().

당신은 당신의 아이디어에 가깝습니다. 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

실제로 prop이 boolean이면 조건을 구현할 필요가 없지만 인라인 조건으로 prop을 추가하려면 아래와 같이 작성해야합니다.

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