Estoy confundido acerca de esta condición.
typeof y React.isValidElement if ( typeof props.headerComponent == "function" && React.isValidElement(props.headerComponent()) ) return props.headerComponent();typeof if (typeof props.footerComponent == 'function') return props.footerComponent(); si usé la 1st condición, no hay error, pero cuando usé la 2nd condición, React , muéstrame
Error: RenderFooter(...): No se devolvió nada del renderizado. Esto generalmente significa que falta una declaración de devolución. O, para no representar nada, devuelve nulo.
alguien me puede decir cual es la diferencia entre la 1st y la 2nd condicion ?
pensé que ambos devolvían una function
const Custom = (props) => { const RenderHeader = () => { if ( typeof props.headerComponent == 'function' && React.isValidElement(props.headerComponent()) ) return props.headerComponent(); else if (React.isValidElement(props.headerComponent)) return props.headerComponent; else return null; }; const RenderFooter = () => { if (typeof props.footerComponent == 'function') return props.footerComponent(); else if (React.isValidElement(props.footerComponent)) return props.footerComponent; else return null; }; return ( <div> <RenderHeader /> <RenderFooter /> </div> ); }; class App extends React.Component { render() { return ( <div> Hello React! <Custom headerComponent={() => console.log('header')} footerComponent={() => console.log('footer')} /> </div> ); } } ReactDOM.render( <App/>, document.getElementById("root") ); <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>