state
importante para su aplicación, que luego presente componentes secundarios. Desea que estos componentes tengan acceso a algunas partes de ese state
, que se pasan como accesorios. Por ejemplo, tal vez tenga un componente de la App
que presente una Navbar
, entre otros componentes. En su App
, tiene un state
que contiene mucha información de usuario, pero la Navbar
solo necesita acceso al nombre de usuario del usuario para poder mostrarla. Navbar
esa pieza de state
al componente Navbar
como prop. Este patrón ilustra algunos paradigmas importantes en React. El primero es el flujo de datos unidireccional . El estado fluye en una dirección en el árbol de los componentes de la aplicación, desde el componente primario con estado hasta los componentes secundarios. Los componentes secundarios solo reciben los datos de estado que necesitan. La segunda es que las aplicaciones con estado complejas pueden dividirse en solo unos pocos, o tal vez un solo componente con estado. El resto de sus componentes simplemente reciben el estado del padre como apoyo y representan una IU desde ese estado. Comienza a crear una separación donde la administración del estado se maneja en una parte del código y la representación de la interfaz de usuario en otra. Este principio de separar la lógica de estado de la lógica de UI es uno de los principios clave de React. Cuando se usa correctamente, hace que el diseño de aplicaciones complejas y con estado sea mucho más fácil de administrar. MyApp
tiene estado y representa un componente de la Navbar
como un elemento secundario. Pase la propiedad del name
en su state
hasta el componente secundario, luego muestre el name
en la etiqueta h1
que forma parte del método de renderizado de la Navbar
de Navbar
. MyApp
debe renderizarse con un componente Navbar
dentro.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find("MyApp").length === 1 && mockedComponent.find("Navbar").length === 1; })(), "The MyApp
component should render with a Navbar
component inside.");'
- text: El componente Navbar
debe recibir el name
propiedad de estado MyApp
como props.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const setState = () => { mockedComponent.setState({name: "TestName"}); return waitForIt(() => mockedComponent.find("Navbar").props() )}; const navProps = await setState(); assert(navProps.name === "TestName", "The Navbar
component should receive the MyApp
state property name
as props."); }; '
- text: El elemento h1
en la Navbar
de Navbar
debe representar el name
prop.
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const navH1Before = mockedComponent.find("Navbar").find("h1").text(); const setState = () => { mockedComponent.setState({name: "TestName"}); return waitForIt(() => mockedComponent.find("Navbar").find("h1").text() )}; const navH1After = await setState(); assert(new RegExp("TestName").test(navH1After) && navH1After !== navH1Before, "The h1
element in Navbar
should render the name
prop."); }; '
```