反应组件关闭标签

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

在React的JSX中，您只需要<MyComponent></MyComponent>在组件具有子组件时编写，如下所示：

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

如果<MyComponent>和之间没有任何内容</MyComponent>，则可以编写<MyComponent/>或<MyComponent></MyComponent>（但<MyComponent/>通常首选）。在详细
介绍JSX
。

只是附带说明，您可以通过特殊props.children属性访问组件中的那些子级。深度JSX中的更多内容：JSX中的子级。

请注意，这是非常 不 一样的HTML或XHTML。它是具有不同规则的自身（相似）事物。例如，在HTML中，<div/>它与<div>：
起始 标签完全相同： 开始 标签必须最终具有结束标签。JSX（或XHTML）不是这样。HTML的规则是， 空元素
（从来没有标记内容的元素，例如br或img）可以在有或没有/之前编写，>并且它们永远不会获得结束标记，但是非空元素（例如div）必须始终具有结束标记（</div>），它们不能自动关闭。在JSX（和XHTML）中，它们可以。