Hice un componente de información sobre herramientas con React.cloneElement . Funciona bien hasta que lo uso con un componente funcional. Luego, los eventos que quiero agregar se ignoran (¿porque no están en los accesorios del niño?). ¿Puedo forzarlos en el elemento secundario más externo/primero de mi componente secundario funcional?
class Tooltip extends Component { render() { return React.Children.map(this.props.children, (child) => { return React.cloneElement(child, { onMouseEnter: () => { console.log('onMouseEnter'); } }) }); } } <Tooltip right text="Logout"> <button> This works fine. </button> </Tooltip> <Tooltip right text="Logout"> <MyButton> This does not work (resp. it works only if the child passes the {...props} manually) </MyButton> </Tooltip>Esto no funciona porque React.cloneElement solo ve el elemento de "nivel superior" y no su contenido.
Suponiendo <MyButton /> se parece a:
const MyButton = ({ children }) => <button>{children}</button>;Luego, cuando lo hagas:
<Tooltip> <MyButton> This does not work (resp. it works only if the child passes the manually) </MyButton> </Tooltip> React.cloneElement adjunta el accesorio onMouseEnter al componente funcional MyButton en lugar del elemento <button> dentro de MyButton y dado que MyButton no es un elemento válido, el evento no funciona en él.
Puede registrar los valores para children en la clase Tooltip y verificar lo mismo.
{ type: "button" key: ".0" ref: null props: Object children: "This works fine." onClick: ƒ onClick() {} _owner: FiberNode _store: Object }Esta es la representación cuando se usa:
<Tooltip right text="Logout"> <button> This works fine. </button> </Tooltip>`:contra
{ type: ƒ MyButton() {} key: ".0" ref: null props: Object children: "Thss does not work (resp. it works only if the child passes the manually)" onClick: ƒ onClick() {} _owner: FiberNode _store: Object }por
<Tooltip> <MyButton> This does not work (resp. it works only if the child passes the manually) </MyButton> </Tooltip>: Idealmente, lo que está tratando de hacer debe hacerse usando Context , pero para una solución más sencilla, puede pasar los accesorios que recibe en MyButton a sus elementos secundarios.