React 组件结束标签

Question

我是 React 新手，我正在尝试弄清楚 与 的用途/用途。除了自动关闭标签，我似乎找不到任何信息。

我已经创建了一个基本的标签滚动条作为JSFiddle 使用自关闭 和后续道具，我想知道是否有比我所做的更好的在 React 中编写的方法。

class TabScroller extends React.Component {

  render() {
    return (
      <div className="tabScroller">
        <div className="NavList">
          <TabNav handleClick={this.handleNavClick} />
          <TabList 
            tabs={this.state.tabs} 
            activeTab={this.state.activeTab}
            scrollPosition={this.state.scrollPosition} 
            handleClick={this.handleTabClick}
          />
        </div>
        <TabContent content={this.state.tabs[this.state.activeTab].content} />
      </div>
    );
  }
}

// ========================================

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

Answer 1

自闭标签的目的仅仅是因为它更紧凑。当所述组件没有您通常包裹在父组件周围的任何子组件时，这尤其有用。

所以通常对于 叶组件（即没有任何子组件的组件），您使用自闭合语法。喜欢：<Component />。即使它有道具，你也可以这样做：<Component foo="bar" />。

但是，请记住 children 是一个道具，所以您可以在技术上这样做：

<Component children={<span>foo</span>} />

但我发现它的可读性较差并建议不要使用它（阅读下面的免责声明）。

---

总而言之，这些是等价的：

• <Component /> = <Component></Component>
• <Component foo="bar" /> = <Component foo="bar"></Component>

• <Component children={<span>foo</span>}></Component> =

  <Component><span>foo</span></Component>

您可以使用您喜欢的任何方法。虽然实践是在没有孩子的情况下使用速记版本。

---

免责声明：虽然通过对象键值定义 childen 属性在技术上可行，但强烈建议不要这样做，因为它会破坏API，因为它应该被使用。仅当您对自己所做的事情有信心时才使用此版本。

Answer 2

在 React 的 JSX 中，当组件有子组件时，只需要写<MyComponent></MyComponent>，像这样：

<MyComponent>
    <Child />
    <Child />
    <Child />
</MyComponent>

如果<MyComponent> 和</MyComponent> 之间没有任何内容，那么您可以写成<MyComponent/> 或<MyComponent></MyComponent>（但通常首选<MyComponent/>）。详情见Introducing JSX。

顺便说一句，您可以通过特殊的props.children 属性访问组件中的这些子项。更多内容请参见JSX in Depth: Children in JSX。

请注意，这与 HTML 或 XHTML 非常不。这是具有不同规则的自己（相似）事物。例如，在 HTML 中，<div/> 与 <div> 完全相同：一个 start 标签，你最终必须有一个结束标签。不是 JSX（或 XHTML）。 HTML 的规则是 void 元素（从不具有标记内容的元素，例如 br 或 img）可以在 > 之前使用或不使用 / 编写，它们永远不会得到一个结束标签，但非空元​​素（如div）必须始终有一个结束标签（</div>），它们不能自闭。在 JSX（和 XHTML）中，它们可以。