我是react的新手,我试图创建一个 Package 器,它将向他的子元素注入一个prop,而不添加另一层html元素(如div/span),所以我使用了React。cloneElement将子元素和prop传递给它以注入,它根本没有呈现子元素!
我做错了什么?
下面是 Package 器代码:
export const Wrapper = ({children}:{children:JSX.Element}) => {
return React.cloneElement(children, {somePropFromWrapper: 'Yoo!'}, null);
};
当我试着使用它的时候
const ParentComponent = () => {
return (
<Wrapper>
<ChildrenComponent id="children-id">
the children inner html
</ChildrenComponent>
<Wrapper>
)
}
它根本没有渲染孩子们!
1条答案
按热度按时间unftdfkk1#
嗨@诺亚,
您应该将子元素prop作为第三个参数**传递给
React.cloneElement
。这将确保Wrapper组件的children
传递给克隆的元素。您的
ChildrenComponent
应该在Wrapper组件中正确呈现。在之前的代码中,您使用了
Wrapper
组件的第三个参数,即null
。这意味着克隆的元素将没有任何子元素,这就是为什么您的子组件不会被呈现的原因。请在此阅读:-React-CloneElement