Question

我是React的新手，我试图找出＆lt; MyComponent＆gt;＆lt; / MyComponent＆gt;的目的/用途vs＆lt; MyComponent /＆gt;。我似乎无法找到除自动关闭标签之外的任何信息。

我使用自动关闭＆lt; MyComponent /＆gt;创建了一个基本的标签滚动条作为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中，只需在组件具有子组件时编写ListNode，如下所示：

<MyComponent></MyComponent>

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

作为附注，您可以通过特殊的<MyComponent/>属性访问组件中的子项。更多信息JSX in Depth: Children in JSX。

请注意，这非常像HTML或XHTML一样不。它有自己的（类似的）不同规则的东西。例如，在HTML中，props.children与<div/>完全相同： start 标记，您最终必须拥有结束标记。不是这样的JSX（或XHTML）。 HTML的规则是 void elements （从不具有标记内容的元素，例如<div>或br）可以在img之前使用/进行编写{1}}并且它们永远不会得到结束标记，但非空元素（如>）必须始终具有结束标记（div），它们不能自动关闭。在JSX（和XHTML）中，它们可以是。

Answer 2

自动关闭标签的目的只是它更紧凑的事实。当所述组件没有任何通常包裹父母的孩子时，这尤其有用。

通常对于叶组件（即没有任何子组件的组件），使用自关闭语法。喜欢：<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 prop在技术上会起作用，但这样做强烈建议不要，因为它破坏API，因为它意味着使用。只有在对自己所做的事情充满信心时才使用此版本。

React组件结束标记

2 个答案: