Javascript 在纯ReactJS（functional）组件中呈现子道具

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>

---

我该怎么办？

您需要将

子项添加到参数“props”的分解赋值中

constpureComponent=（{url，children}）=>（…）

children
只是传递给组件的道具。为了像使用
props.url那样使用它，您需要将它添加到该列表中，以便它可以从props对象中“拉出”。
应该是
{props.children}
？通常，如果您的答案以“try this”或“I think”开头，它可能应该是一条注释。这里没有解构赋值，纯组件将props对象作为第一个参数，因此{url，children，…}是从props到这些变量的解构赋值。很高兴它有帮助。@anotherRobLynch:你的意思是我可以直接用
道具
代替
{url，children}
，然后使用
道具.url
和
道具.children
？我想知道为什么它需要放在花括号里。@FighterJet那也行。如果您的同事不习惯阅读大量ES6代码，那么这可能是更好的方法。我个人喜欢解构的外观，因为它使JSX更干净。
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>