根据组件类型有条件地将道具传递给孩子

Question

我对React还是相当陌生，并且正在创建一个使用react-bootstrap的表单字段的简单工具集。 我正在使用<Form>组件包装所有内容。 <Form>组件将呈现所有子项，并传递一个新属性。

React.Children.map(this.props.children, (child) => {
    return React.cloneElement(child, {
        myNewProp: 'hello'
    }
});

我的问题是没有myNewProp子元素会导致警告Unknown props myNewProp ，本地HTML和react-bootstrap组件。 是否有任何方法可以根据组件的类型有条件地向子元素添加道具？ 例如

if (child instanceof <nativeHTMLelement>) { ... } else { ... }

Answer 1

在这种情况下，您可以使用child.type ：

if (typeof child.type === 'string') {
  // this is a html element
} else {
  // this is a React component
}

Answer 2

假设您有isNumber和isString ：

React.Children.map(this.props.children, (child) => {
    if(!child)
        return child;
    if(isNumber(child))
        return child;
    if(isString(child))
        return child;
    // then this must be a ReactElement
    if(child.type === MyElement)
        return React.cloneElement(child, {
            myNewProp: 'hello'
        }
});

如果您使用的是打字稿，则isNumber和isString应该由@types/node 。 如果不是，它们很容易实现。