state
方法。在render()
方法中,在return
语句之前,您可以直接编写JavaScript。例如,您可以声明函数,从state
或props
访问数据,对此数据执行计算,等等。然后,您可以将任何数据分配给您可以在return
语句中访问的变量。 MyComponent
render方法中,定义一个名为name
的const
,并将其设置为等于组件state
的name值。因为您可以直接在代码的这一部分编写JavaScript,所以您不必将此引用括在花括号中。接下来,在return语句中,使用变量name
在h1
标记中呈现此值。请记住,您需要在return语句中使用JSX语法(JavaScript的大括号)。 MyComponent
应该有一个键name
,其freeCodeCamp
值存储在其状态中。
testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state("name") === "freeCodeCamp", "MyComponent
should have a key name
with value freeCodeCamp
stored in its state.");'
- text: MyComponent
应该渲染一个包含在单个div
的h1
标头。
testString: 'assert(/MyComponent
should render an h1
header enclosed in a single div
.");'
- text: '渲染的h1
标记应包含对{name}
的引用。'
testString: 'getUserInput => assert(/h1
tag should include a reference to {name}
.");'
- text: 渲染的h1
标头应包含从组件状态呈现的文本。
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: "TestName" }); return waitForIt(() => mockedComponent.html()) }; const firstValue = await first(); assert(firstValue === "h1
header should contain text rendered from the component's state."); };'
```
## Challenge Seed