children 属性

假设我们正在构建一个自定义按钮组件。它应该看起来和行为都像一个常规的 HTML 按钮，但它应该有红色背景和白色文本。

我们可以这样写：

function RedButton({ contents }) {
  return (
    <button
      style={{
        color: "white",
        backgroundColor: "red",
      }}
    >
      {contents}
    </button>
  );
}

然后我们会这样使用：

root.render(<RedButton contents="Don't click me" />);

这有效……但感觉有点奇怪，不是吗？它与我们使用典型的 HTML 按钮的方式非常不同，在那里内容放在打开和关闭标签之间：

<button>Don't click me</button>

作为一种不错的语法糖?React 让我们可以对自定义组件做同样的事情

root.render(<RedButton>Don't click me</RedButton>);

当我们这样做时，我们可以通过 children 属性访问子元素：

function RedButton({ children }) {
  return (
    <button
      style={{
        color: "white",
        backgroundColor: "red",
      }}
    >
      {children}
    </button>
  );
}

React 为我们提供的一项有益的功能是，当我们在开放和关闭标签之间传递某些内容时，React 会自动将该值提供给我们。

当我们检查所产生的 React 元素时，我们可以看到这一点

import React from 'react';

const element = (
  <div>
    Hello World
  </div>
);

console.log(element);

children 是一种特殊值，当涉及到 props 时就是一个“保留字”。

但这并不特别。我认为许多新手在 React 中会认为 children 在某种程度上与其他 props 有所不同。实际上，它完全相同。

如果我们愿意，我们可以用“传统”的方式传递 children 。它有些笨拙，但结果是相同的：

// This element:
<div children="Hello world!" />
 
// …is equivalent to this one:
<div>
  Hello world!
</div>

因此，我们提供了一种特殊的语法，使 JSX 感觉更加像 HTML，但从根本上说， children 属性与其他任何属性是一样的。它没有什么特别或神奇的地方。

children 属性

如果两者都写怎么样？