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

【问题标题】：Invalid prop `children` supplied to `DropdownItem` expected a ReactNode提供给“DropdownItem”的无效道具“children”需要一个 ReactNode
【发布时间】：2019-10-09 09:34:24
【问题描述】：

组件：DropdownItem
reactstrap 版本^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

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

【问题讨论】：

标签： reactjs react-proptypes reactstrap

【解决方案1】：

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

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

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

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

【讨论】：