소품에 액세스하면 정의되지 않은 오류가 발생합니다.

Question

props.children 매개 변수를 사용하여 하위 구성 요소를 전달하는 구성 요소가 있습니다. 그러나 다음 코드에서 소품에 액세스하려고하면 정의되지 않은 오류가 발생합니다.

if (children && React.isValidElement(children)) { 
    avatar = React.cloneElement(avatarProp, { 
     className: classNames(classes.avatar, avatarProp.props.className), 
     childrenClassName: classNames(classes.avatarChildren, avatarProp.props.childrenClassName), 
    }); 
} 

다음 코드를 사용하여 구성 요소를 호출합니다.

<Chip label="This is a sample chip"> 
    <Avatar backgroundColor="#333" size="100" /> 
</Chip> 

구성 요소 논리에서 매개 변수에 액세스해도 전달되는 팝업은 선택 사항입니다. 이 문제를 어떻게 해결할 수 있습니까? 이 클래스는 선택 사양 일하려면

main.bundle.js:53409 TypeError: Cannot read property 'avatar' of undefined 
    at Chip.render (main.bundle.js:77126) 
    at main.bundle.js:31358 
    at measureLifeCyclePerf (main.bundle.js:30638) 
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (main.bundle.js:31357) 
    at ReactCompositeComponentWrapper._renderValidatedComponent (main.bundle.js:31384) 
    at ReactCompositeComponentWrapper.performInitialMount (main.bundle.js:30924) 
    at ReactCompositeComponentWrapper.mountComponent (main.bundle.js:30820) 
    at Object.mountComponent (main.bundle.js:5115) 
    at ReactDOMComponent.mountChildren (main.bundle.js:30193) 
    at ReactDOMComponent._createInitialChildren (main.bundle.js:28381) 

---

클래스 내부 렌더링 변수 방법은

render() { 

    let defaultClasses = 'chips chips-rounded', 
     defaultLabelClasses = 'chips-label', 
     avatar = null, 
     deleteIcon = ''; 

    const { 
     classes, 
     children, 
     onClick, 
     label, 
     onRequestDelete, 
     labelStyle, 
    } = this.props; 

    if (children && React.isValidElement(children)) { 
     avatar = React.cloneElement(children, { 
      className: classNames(classes.avatar, children.props.className), 
      childrenClassName: classNames(classes.avatarChildren, children.props.childrenClassName), 
     }); 
    } 

    if(onRequestDelete){ 
     deleteIcon = (
      <div className="deleteIcon" onClick={this.handleDeleteIconClick} /> 
     ); 
    } 

    return (
     <div className={classNames(classes, defaultClasses)} onClick={onClick} > 
      {avatar} 
      <span className={classNames(labelStyle, defaultLabelClasses)}>{label}</span> 
      {deleteIcon} 
     </div> 
    ) 
} 

클래스 변수 다음 코드에서 그것을 확인해야 proptypes

const propTypes = { 
    /* 
    * Used to extend default object classes 
    */ 
    classes : PropTypes.object, 
    /* 
    * Click event handler 
    */ 
    onClick : PropTypes.func, 
    /* 
    * Delete event handler 
    */ 
    onRequestDelete : PropTypes.func, 
    /* 
    * This property will contain label text 
    */ 
    label : PropTypes.string, 
    /* 
    * This property will contain label styling 
    */ 
    labelStyle : PropTypes.object 
} 

Answer 1

를 사용하여 정의 . 그렇게 할 방법이 없습니다. 삼항 연산자를 사용하여 if else를 가능한 한 짧게 유지하고 소품 명명 클래스가 구성 요소에 전달되지 않을 때 빈 문자열을 사용하십시오.

예

:

if (children && React.isValidElement(children)) { 
    const avatarClasses = classes ? classes.avatar : ''; 
    const avatarChildrenClasses = classes ? classes.avatarChildren : ''; 

    avatar = React.cloneElement(children, { 
    className: classNames(avatarClasses, children.props.className), 
    childrenClassName: classNames(avatarChildrenClasses, 
    children.props.childrenClassName), 
    }); 
}