javascript - React cloneElement is not working for functional component - Stack Overflow

admin管理员组

文章数量:1291324

I would like to add some props to my ponent using {React.cloneElement(<MyComponent />, { onClick: () => console.log('click'), style: {background: 'red'} })}

Full code:

const MyComponent = () => {
  return (
    <div>
      foooo
    </div>
  );
};

....
return React.cloneElement(<MyComponent />, { onClick: () => console.log('click'), style: {background: 'red'} })

But props are not passed into my ponent.

When I use:

return React.cloneElement(<div>foooo</div>, { onClick: () => console.log('click'), style: {background: 'red'} })

Props are working. Why? I don`t understand why.

I would like to add some props to my ponent using {React.cloneElement(<MyComponent />, { onClick: () => console.log('click'), style: {background: 'red'} })}

Full code:

const MyComponent = () => {
  return (
    <div>
      foooo
    </div>
  );
};

....
return React.cloneElement(<MyComponent />, { onClick: () => console.log('click'), style: {background: 'red'} })

But props are not passed into my ponent.

When I use:

return React.cloneElement(<div>foooo</div>, { onClick: () => console.log('click'), style: {background: 'red'} })

Props are working. Why? I don`t understand why.

• javascript
• reactjs
• clone-element

Share Improve this question Follow asked Mar 25, 2020 at 8:13 masiyik879masiyik879 35111 gold badge44 silver badges1111 bronze badges 1

• cloneElement passes the props to the ponent, but your ponent must accept the props as arguments, otherwise the props are not applied. See answer by @SalientBrain – kluverp Commented Dec 14, 2022 at 13:33

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You need to apply props inside you ponent:

export const Test = (props: any) => {
  return (<button {...props}>Click Me</button>);
}

In this case you can set props using

React.cloneElement(<MyComponent/>, props, null);

but I do not remend cloning (it is too heavy) I think that it is better to use special render function in props:

export const Wrapper = (props: {render: (props: any) => any}) => {
    const childProps = {style: {background: 'red'}, onClick: () => { console.log('click'); }};
    if (props.render){
      return props.render(childProps);
    } else {
      return <></>;
    }
  }
// ...
// usage:
export default function App() {      
  return (
    <div className="App">      
      <Wrapper render={(props)=>{
        return <button {...props}>TEST</button>;
      }}/>      
    </div>
  );
}

Why would you use cloneElement when you got JSX available (can conclude it from MyComponents syntax).

Instead do:

<MyComponent
  onClick={() => console.log("click")}
  style={{ background: "red" }}
/>

And fix your ponent:

const MyComponent = ({ style, onClick }) => {
  return <div onClick={onClick} style={style}>foooo</div>;
}

JSX is sugar syntax for createElement / cloneElement.

React.cloneElement(
  element,
  [props],
  [...children]
)

React.cloneElement() is almost equivalent to:

<element.type {...element.props} {...props}>{children}</element.type>

Therefore the right syntax:

const onClick = () => console.log('click');
const style = {background: 'red'};

// Exatcly the same effect as <MyComponent .../> above
React.cloneElement(<MyComponent/>, {onClick, style}, null);

本文标签： javascriptReact cloneElement is not working for functional componentStack Overflow