提供给“DropdownItem”的无效道具“children”需要 ReactNode

Question

• 成分：DropdownItem
• 反应带版本^8.0.0
• 反应版本^16.8.6
• 引导程序版本^4.3.1

我正在使用 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

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

Answer 1

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

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

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

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