React 组件结束标签 [英] React component closing tag

问题描述

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

I'm new to React and I'm trying to figure out the purpose/use of <MyComponent></MyComponent> vs <MyComponent />. I can't seem to find information on anything except self-closing tags.

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

I've created a basic tab scroller as a JSFiddle using the self-closing <MyComponent /> and subsequent props, and I'm wondering if there's a better way to write in React than what I've done.

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')
);

推荐答案

在 React 的 JSX 中，只有当组件有子组件时，才需要编写 <MyComponent></MyComponent>，比如这个:

In React's JSX, you only need to write <MyComponent></MyComponent> when the component has child components, like this:

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

如果<MyComponent>和</MyComponent>之间没有任何内容，那么你可以写成<MyComponent/> 或 <MyComponent></MyComponent>(但通常首选 ).介绍 JSX 中的详细信息.

If there is nothing between <MyComponent> and </MyComponent>, then you can write it either <MyComponent/> or <MyComponent></MyComponent> (but <MyComponent/> is generally preferred). Details in Introducing JSX.

顺便说一句，您可以通过特殊的 props.children 属性访问组件中的这些子项.深入了解 JSX:JSX 中的子项 中的更多内容.

Just as a side note, you'd access those children in your component via the special props.children property. More in JSX in Depth: Children in JSX.

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

Note that this is very much not like HTML or XHTML. It's its own (similar) thing with different rules. For instance, in HTML, <div/> is exactly the same thing as <div>: A start tag, for which you must eventually have an end tag. Not so JSX (or XHTML). The rules for HTML are that void elements (elements that never have markup content, such as br or img) can be written with or without / before > and they never get an ending tag, but non-void elements (like div) must always have an ending tag (</div>), they cannot be self-closing. In JSX (and XHTML), they can be.

这篇关于React 组件结束标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！