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