App
组件,它呈现一个名为Welcome
的子组件,它是一个无状态功能组件。您可以通过编写以下方式传递Welcome
user
属性: <应用>您使用React提供支持的自定义HTML属性 ,以将属性
<Welcome user ='Mark'/>
</应用>
user
传递给组件Welcome
。由于Welcome
是一个无状态功能组件,因此它可以访问此值,如下所示: const Welcome =(props)=> <h1> Hello,{props.user}!</ h1>调用此值
props
是标准的,在处理无状态函数组件时,您基本上将其视为返回JSX的函数的参数。您可以在函数体中访问参数的值。使用类组件,您会发现这有点不同。 Calendar
和CurrentDate
组件。当渲染CurrentDate
从Calendar
组件,通过在属性date
分配给从JavaScript的当前日期Date
对象。然后在CurrentDate
组件中访问此prop
,在p
标签中显示其值。请注意,对于要作为JavaScript计算的prop
值,它们必须用大括号括起来,例如date={Date()}
。 Calendar
组件应返回单个div
元素。
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().type() === "div"; })(), "The Calendar
component should return a single div
element.");'
- text: Calendar
组件的第二个子CurrentDate
应该是CurrentDate
组件。
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().childAt(1).name() === "CurrentDate"; })(), "The second child of the Calendar
component should be the CurrentDate
component.");'
- text: CurrentDate
组件应该有一个名为date
的prop。
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().childAt(1).props().date })(), "The CurrentDate
component should have a prop called date
.");'
- text: CurrentDate
的date
道具应包含一串文本。
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); const prop = mockedComponent.children().childAt(1).props().date; return( typeof prop === "string" && prop.length > 0 ); })(), "The date
prop of the CurrentDate
should contain a string of text.");'
- text: CurrentDate
组件应该从p
标记中的date
道具中呈现值。
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.find("p").html().includes(Date().substr(3)); })(), "The CurrentDate
component should render the value from the date
prop in the p
tag.");'
```
The current date is:
{ /* change code above this line */ }