javascript - React 组件结束标签

Question

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

我创建了一个基本的标签滚动器作为 JSFiddle使用自动关闭的 和后续 Prop ，我想知道是否有比我所做的更好的 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

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

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

如果<MyComponent>之间没有任何内容和 </MyComponent> , 那么你可以写成 <MyComponent/>或 <MyComponent></MyComponent> (但通常首选 <MyComponent/>)。详见Introducing JSX .

作为旁注，您可以通过特殊的 props.children 访问组件中的这些子项属性(property)。更多内容 JSX in Depth: Children in JSX .

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