freeCodeCamp

4.6 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036169	Pass Props to a Stateless Functional Component	6	false		将道具传递给无状态功能组件

Description

之前的挑战涉及在React中创建和组合JSX元素，功能组件和ES6样式类组件的很多内容。有了这个基础，现在是时候看看React中常见的另一个特性：道具。在React中，您可以将props或属性传递给子组件。假设您有一个App组件，它呈现一个名为Welcome的子组件，它是一个无状态功能组件。您可以通过编写以下方式传递Welcome user属性：

<应用>
<Welcome user ='Mark'/>
</应用>

您使用React提供支持的自定义HTML属性 ，以将属性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

4.6 KiB Raw Blame History Unescape Escape