¿Qué sucede si paso el componente de función como variable de estado?
Por ejemplo, ¿funcionaría técnicamente lo siguiente? Lo probé y parece que no funciona. Recibo el error props.children no es una función. ¿Alguna idea de si esto funcionaría?
const App = () => { [functionComponent, setFunctionComponent] = useState((name) => <div>Hi, {name}</div>) return <SomeContainerComponent>{functionComponent}</SomeContainerComponent> } const SomeContainerComponent = ({ children }) => { return <div>{children({name: "John"})}</div>; }Cuando pasa una función (ya sea una función que devuelve JSX o no) a useState , le está diciendo a React que use la inicialización perezosa : llamar a la función para calcular el valor del estado inicial, en lugar de establecer el estado para que sea el función que ha pasado.
Para lo que desea, necesitaría pasar una función que devuelva una función y también capitalizar el estado, ya que es un componente.
const App = () => { const [FunctionComponent, setFunctionComponent] = React.useState(() => () => <div>Hello, World!</div>); return <FunctionComponent />; }; ReactDOM.render(<App />, document.querySelector('.react')); <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>