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方法中的classes变量

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尽可能短，并在没有将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), }); }

访问道具会产生未定义的错误

1 个答案: