訪問道具會產生不確定的錯誤

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>

即使我訪問組件邏輯中的參數，也可以選擇是否傳遞pop。 我該如何解決這個問題？

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

使用原型定義的類變量

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盡可能短，並且在沒有將任何具名的prop類別傳遞給組件時使用空字符串。

例：

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