freeCodeCamp/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/pass-props-to-a-stateless-functional-component.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24c314108439a4d4036169	將 Props 傳遞給無狀態函數組件	6	301402	pass-props-to-a-stateless-functional-component

--description--

之前的挑戰涵蓋了關於在 React 中創建和組合 JSX 元素、函數組件和 ES6 風格的類組件的很多內容。 有了這個基礎，現在是時候看看 React 中的另一個常見特性 props 了。 在 React 中，可以將屬性傳遞給子組件。 假設有一個 App 組件，該組件渲染了一個名爲 Welcome 的子組件，它是一個無狀態函數組件。 可以通過以下方式給 Welcome 傳遞一個 user 屬性：

<App>
  <Welcome user='Mark' />
</App>

可以把創建的 React 支持的自定義 HTML 屬性傳遞給組件， 在上面的例子裏，將創建的屬性 user 傳遞給組件 Welcome。 由於 Welcome 是一個無狀態函數組件，它可以像這樣訪問該值：

const Welcome = (props) => <h1>Hello, {props.user}!</h1>

調用 props 這個值是常見做法，當處理無狀態函數組件時，基本上可以將其視爲返回 JSX 的函數的參數。 這樣，你就可以在函數體中訪問該值。 但對於類組件，訪問方式會略有不同。

--instructions--

代碼編輯器中有 Calendar 和 CurrentDate 組件。 從 Calendar 組件渲染 CurrentDate 時，從 JavaScript 的 Date 對象分配當前日期，並將其作爲 date 屬性傳入。 然後訪問 CurrentDate 組件的 prop，並在 p 標籤中顯示其值。 請注意，要將 prop 的值視爲 JavaScript，必須將它們括在花括號中，例如date={Date()}。

--hints--

Calendar 組件應該返回單個 div 元素。

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(Calendar));
    return mockedComponent.children().type() === 'div';
  })()
);

Calendar 組件的第二個子元素應該是 CurrentDate 組件。

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(Calendar));
    return mockedComponent.children().childAt(1).name() === 'CurrentDate';
  })()
);

CurrentDate 組件應該有一個名爲 date 的屬性。

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(Calendar));
    return mockedComponent.children().childAt(1).props().date;
  })()
);

CurrentDate 的 date 屬性應該包含一段文本字符串。

assert(
  (function () {
    const mockedComponent = Enzyme.mount(React.createElement(Calendar));
    const prop = mockedComponent.children().childAt(1).props().date;
    return typeof prop === 'string' && prop.length > 0;
  })()
);

date 屬性應該通過調用 Date() 生成。

assert(/<CurrentDatedate={Date\(\)}\/>/.test(__helpers.removeWhiteSpace(code)));

CurrentDate 組件應該把 date 屬性渲染在 p 標籤內。

let date = 'dummy date';
assert(
  (function () {
    const mockedComponent = Enzyme.mount(
      React.createElement(CurrentDate, { date })
    );
    return mockedComponent.find('p').html().includes(date);
  })()
);

--seed--

--after-user-code--

ReactDOM.render(<Calendar />, document.getElementById('root'))

--seed-contents--

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>
    );
  }
};

--solutions--

const CurrentDate = (props) => {
  return (
    <div>
      { /* Change code below this line */ }
      <p>The current date is: {props.date}</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 date={Date()} />
        { /* Change code above this line */ }
      </div>
    );
  }
};