state
,然后呈现子组件。您希望这些组件可以访问该state
某些部分,这些部分作为props传递。例如,您可能有一个App
组件可以呈现Navbar
以及其他组件。在您的App
,您的state
包含大量用户信息,但Navbar
只需要访问用户的用户名,以便显示它。您将该state
作为prop传递给Navbar
组件。这种模式说明了React中的一些重要范例。第一种是单向数据流 。状态沿着应用程序组件树的一个方向流动,从有状态父组件到子组件。子组件仅接收所需的状态数据。第二,复杂的有状态应用程序可以分解为几个或者一个有状态的组件。其余组件只是从父级接收状态作为props,并从该状态呈现UI。它开始创建一个分离,其中状态管理在代码的一部分中处理,而UI在另一部分中呈现。将状态逻辑与UI逻辑分离的原则是React的关键原则之一。当它被正确使用时,它使复杂的有状态应用程序的设计更容易管理。 MyApp
组件是有状态的,并将Navbar
组件呈现为子组件。将name
属性的state
向下传递给子组件,然后在h1
标记中显示该name
,该name
是Navbar
render方法的一部分。 MyApp
组件应该使用内部的Navbar
组件进行渲染。
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: Navbar
组件应该将MyApp
状态属性name
作为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: Navbar
的h1
元素应该呈现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."); }; '
```