Question

组件：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

只是好奇知道如果不将其包装在标签中为什么会得到警告？

Answer 1

您之所以会收到警告，是因为DropdownItem希望该节点作为子节点，并且无法推断您的item是否为有效的反应节点，然后引发警告。 / p>

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

//可以呈现的任何东西：数字，字符串，元素或包含这些类型的数组//（或片段）。 optionalNode：PropTypes.node，

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

提供给`DropdownItem`的无效道具`children'期望有一个ReactNode

1 个答案: