reactjs React.CloneElement -不呈现克隆的元素

v6ylcynt  于 2022-12-22  发布在  React
关注(0)|答案(1)|浏览(143)

我是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>
    )
}

它根本没有渲染孩子们!

unftdfkk

unftdfkk1#

嗨@诺亚,

您应该将子元素prop作为第三个参数**传递给React.cloneElement。这将确保Wrapper组件的children传递给克隆的元素。

export const Wrapper = ({children}: {children: JSX.Element}) => {
  return React.cloneElement(children, {somePropFromWrapper: 'Yoo!'}, children);
};

您的ChildrenComponent应该在Wrapper组件中正确呈现。
在之前的代码中,您使用了Wrapper组件的第三个参数,即null。这意味着克隆的元素将没有任何子元素,这就是为什么您的子组件不会被呈现的原因。
请在此阅读:-React-CloneElement

相关问题