IT技术 - react组件结束标签 - 吾爱随笔录

react组件结束标签

IT技术 javascript reactjs components

2021-03-28 20:34:51

我是 React 的新手，我正试图弄清楚 <MyComponent></MyComponent> 与 <MyComponent /> 的目的/用途。除了自闭合标签，我似乎找不到任何信息。

我使用自关闭的 <MyComponent /> 和后续props创建了一个基本的标签滚动条作为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')
);

2个回答

在 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）中，它们可以。

感谢您提供的信息，我发现 React Composition vs Inheritance还补充说，multiple<Child />被<MyComponent></MyComponent>作为 props.children传递给

2021-05-30 20:34:51

自闭合标签的目的很简单，因为它更紧凑。当所述组件没有您通常环绕父级的任何子级时，这尤其有用。

所以通常对于叶组件（即没有任何子组件的组件），您使用自关闭语法。喜欢：<Component />。而且，即使它有props，你可以这样做：<Component foo="bar" />。

但是，请记住这children是一个props，因此您可以在技术上执行以下操作：

<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，因为它会被使用。仅当对自己正在做的事情有信心时才使用此版本。

有趣的是，该children={...}表格似乎没有记录；在Introducing JSX > Specificationing Children with JSX或在JSX In Depth > Children In JSX 中没有提到它。文档也props.children称为“特殊”属性。当然，我们知道 JSX 被转译为一个React.createElement带有childrenoption 属性的调用，但是......虽然它目前可能有效，但我想我要么避免提及它，要么使用更强的免责声明。

2021-05-28 20:34:51

@Chimera.Zen TJCrowder 意味着不应将道具传递children为<Component children={...} />，而只能作为<Component>{...}</Component>. 但是，访问 children可以而且应该使用props.children. 不要混淆传递和访问。

2021-06-02 20:34:51

@Chimera.Zen：请参阅上面 Chris 的评论，我只是在谈论children={<span>foo</span>}. 要使用孩子，您可以使用props.children，这很好（实际上，您别无选择）。

2021-06-04 20:34:51

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

2021-06-05 20:34:51

@Chris：哦，我明白了。

2021-06-20 20:34:51

其它你可能感兴趣的问题

上一篇React.createElement: 类型无效——需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：对象下一篇使用 create-react-app 构建后如何修复白屏？