반응 소품 - 다른 소품이 null이거나 비어 있는 경우 소품에서 세트가 필요합니다.

반응 소품 - 다른 소품이 null이거나 비어 있는 경우 소품에서 세트가 필요합니다.

컴포넌트가 있습니다.<Button>.
컴포넌트에 없는 경우this.props.children, 소품을 설정하고 싶다.ariaLabel~하듯이isRequired그 이외의 경우는 옵션입니다.그걸 어떻게 하는 거죠?

ariaLabel소품 불필요:

<Button>Add to bag</Button>

---

ariaLabel소품 필요:

<Button ariaLabel="Add to bag" icon={ favorite } />

---

한다면this.props.children그리고.this.props.ariaLabel비어있으면, 라고 하는 에러가 발생합니다.this.props.ariaLabel이isRequired

<Button icon={ favorite } />

---

prop 타입:

Button.propTypes = {
    /** icon inside Button. */
    icon: React.PropTypes.object,
    /** Content inside button */
    children: React.PropTypes.node,
    /** Aria-label to screen readers */
    ariaLabel: React.PropTypes.string, /*isRequired if children is empty */
};

감사해요.

다른 라이브러리가 필요하지 않습니다. 'prop-types'는 바로 이 기능을 제공합니다.https://facebook.github.io/react/docs/typechecking-with-proptypes.html 를 참조해 주세요.

예:

import PropTypes from 'prop-types';

//.......    

ExampleComponent.propTypes = {
    showDelete: PropTypes.bool,
    handleDelete: function(props, propName, componentName) {
        if ((props['showDelete'] == true && (props[propName] == undefined || typeof(props[propName]) != 'function'))) {
            return new Error('Please provide a handleDelete function!');
        }
    },

}

이것이 바로 필요한 것일 수 있습니다.https://github.com/thejameskyle/react-required-if

이 경우 propType은 다음과 같습니다.

import requiredIf from 'react-required-if';

Button.propTypes = {
    /** icon inside Button. */
    icon: React.PropTypes.object,
    /** Content inside button */
    children: React.PropTypes.node,
    /** Aria-label to screen readers */
    ariaLabel: requiredIf(React.PropTypes.string, props => !props.children), /*isRequired if children is empty */
};

위의 @chickenchilli의 답변에 덧붙여 다음과 같이 보다 편리한 도우미 기능으로 요약할 수 있습니다.

conditional PropType.js

export default function conditionalPropType(condition, message) {
  if(typeof condition !== 'function') throw "Wrong argument type 'condition' supplied to 'conditionalPropType'";
  return function(props, propName, componentName) {
    if (condition(props, propName, componentName)) {
      return new Error(`Invalid prop '${propName}' '${props[propName]}' supplied to '${componentName}'. ${message}`);
    }
  }
}

My Component.js

import PropTypes from 'prop-types';
import conditionalPropType from './conditionalPropType';

[...]

MyComponent.propTypes = {
  conditionProp: PropTypes.bool,
  dependentProp: conditionalPropType(props => (props.condition && typeof(props.someProp) !== 'boolean'), "'dependentProp' must be boolean if 'conditionProp' is true"),
};

사용하다isRequiredIf.

4년 전의 PR이 추가되었다.isRequiredIfPropTypes 라이브러리로 이동합니다.안타깝게도 PropTypes 라이브러리를 유지 보수 모드로 전환하고 있었기 때문에 통합하지 않았습니다.

제가 일하는 회사는 여전히 PropTypes를 사용하고 있기 때문에masterPropTypes 라이브러리의 분기에 이 기능이 추가되었습니다.

이제 다음과 같은 작업을 수행할 수 있습니다.

ariaLabel: PropTypes.string.isRequiredIf( props => props.children )

아주 깔끔하고 미니멀합니다.

고객님의 프로젝트에서 델의 포크를 자유롭게 사용하여package.json다음을 포함합니다.

"prop-types": "github:cntral/prop-types#isRequiredIf"

메모: 부울 파라미터는 필요 없습니다.소품을 전달하고 부울을 반환해야 하는 함수만 필요합니다.

언급URL : https://stackoverflow.com/questions/42299335/react-props-set-isrequired-on-a-prop-if-another-prop-is-null-empty