时间戳

首页 > 解决方案 > 提供给“DropdownItem”的无效道具“children”需要一个 ReactNode

reactjs - 提供给“DropdownItem”的无效道具“children”需要一个 ReactNode

问题描述

我正在使用 reactstrap 下拉菜单。我正在尝试使用地图功能填充下拉项目

render() {
    return (
        <Dropdown isOpen={this.state.open} toggle={this.toggle}>
        <DropdownToggle caret>
            {this.props.name}
        </DropdownToggle>
        <DropdownMenu>
            {this.props.items.map(function(item) {
                return(
                    <DropdownItem key={item}>
                        <text>{item}</text>
                    </DropdownItem>
                );
            })}
        </DropdownMenu>
    </Dropdown>
    );
}

如果我没有将 {item} 包装在标签（div 或文本）中，我会在运行测试用例时收到以下错误。

console.error node_modules/prop-types/checkPropTypes.js:20
Warning: Failed prop type: Invalid prop children supplied to DropdownItem, expected a ReactNode.
in DropdownItem

只是想知道如果我不将其包装在标签中，为什么会收到警告？

标签： reactjsreact-proptypesreactstrap

解决方案

您收到警告是因为DropdownItem期望节点作为子节点，并且无法推断您item是否是有效的反应节点，然后引发警告。

根据关于 propTypes 的文档，您可以尝试将项目包装在 a 中<React.Fragment>，但恐怕它不起作用：

// 可以呈现的任何内容：数字、字符串、元素或数组 //（或片段）包含这些类型。可选节点：PropTypes.node，

好消息是 propTypes 检查只发生在开发模式下，一旦你编译你的应用程序，所有与 propTypes 相关的警告都消失了，如果你不想添加额外的元素并且可以忍受警告，一切都应该很好。

推荐阅读