React 组件结束标签

Posted 2023-02-22

【中文标题】React 组件结束标签

【英文标题】：React component closing tag

【发布时间】：2018-08-06 01:39:49

【问题描述】：

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

【参考方案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，因为它应该被使用。仅当您对自己所做的事情有信心时才使用此版本。

【讨论】：

有趣的是，children=... 表单似乎没有记录； Introducing JSX > Specifying Children with JSX 或 JSX In Depth > Children In JSX 中没有提到它。文档还将props.children 称为“特殊”属性。当然，我们知道 JSX 被转换为带有 children 选项属性的 React.createElement 调用，但是......虽然它目前可能有效，但我想我要么避免提及它，要么使用更强大的免责声明。

@Chimera.Zen T.J.Crowder 表示不应将children 属性传递为<Component children=... />，而只能作为<Component>...</Component>。但是，访问 children 可以而且应该通过props.children 完成。不要混淆传递和访问。

@Chimera.Zen：见上面克里斯的评论，我只是在谈论children=<span>foo</span>。要使用孩子，你可以使用props.children，这很好（事实上，你别无选择）。

@Chris：我认为你的意思是他们选择不记录，而不是双重否定。 :-)

@Chris：哦，我意识到了。

【参考方案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）中，它们可以。

【讨论】：

感谢您的信息，我找到了 React Composition vs Inheritance，它还补充说多个 <Child /> 被作为 props.children 传递给 <MyComponent></MyComponent>