Lo que he estado intentando es esto:
El componente principal es un componente de clase con una función logToConsole. Resumí el código a continuación:
Estoy tratando de pasar la función del componente principal a un componente funcional secundario
Componente principal :
logToConsole = () => { console.log("test); } render(){ return( <ChildComp logThis={this.logToConsole} /> ) }El ChildComp es :
const ChildComp = (props) => ( <button onClick={()=>props.logThis()}>Click Here</button> ) export default ChildComp Sin embargo, logThis no es una función. ¿Cómo resuelvo este problema? ¿Hay una mejor manera de hacerlo?
Padre:
import React from "react"; import Child from "./Child"; class Parent extends React.Component { logToConsole = () => { console.log("test"); }; render() { return <Child log={this.logToConsole} />; } } export default Parent;Niño:
export default function Child(props) { return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <button onClick={props.log}>Log</button> </div> ); }Demo en vivo
Su componente hijo debe ser:
<button onClick={props.logThis}>Click Here</button>logToConsole = () => { console.log("test); }debe convertirse
const logToConsole = () => { console.log("test"); };