在純ReactJS（功能）組件中渲染子道具

Question

React v0.14支持純功能組件 （即相同的輸入等於相同的輸出）。 道具作為函數參數傳入。

// Using ES6 arrow functions and an implicit return:
const PureComponent = ({url}) => (
  <div>
    <a href={url}>{url}</a>
  </div>
);

// Used like this:
<PureComponent url="http://www.google.ca" />

// Renders this:
<a href="http://www.google.ca">http://www.google.ca</a>

但是，如何渲染PureComponent的子代？ 在常規有狀態組件中，您可以使用this.props.children訪問子this.props.children ，但這顯然不適用於此處。

const PureComponent = ({url}) => (
  <div>
    <a href={url}>{children}</a> // <--- This doesn't work
  </div>
);

<PureComponent url="http://www/google.ca">Google Canada</PureComponent>

// I want to render this:
<a href="http://www.google.ca">Google Canada</a>

我該怎么辦？

Answer 1

您需要將children項添加到參數“props”的解構賦值中。

const PureComponent = ({url, children}) => (...)

children只是傳遞給組件的道具。 為了像使用props.url一樣使用它，你需要將它添加到該列表中，以便可以“拉出”props對象。