web-dev-qa-db-ja.com

Reactコンポーネント終了タグ

Reactが初めてで、<MyComponent> </ MyComponent>と<MyComponent />の目的/使用法を理解しようとしています。情報が見つからないようです。自己終了タグを除くすべて。

基本的なタブスクローラーを JSFiddle として作成しました。これは、自己終了する<MyComponent />とそれに続くプロップを使用しており、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')
);
javascriptreactjscomponents
10
Chimera.Zen

ReactのJSXでは、次のようにコンポーネントに子コンポーネントがある場合にのみ<MyComponent></MyComponent>を記述する必要があります。

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

<MyComponent>と</MyComponent>の間に何もない場合は、<MyComponent/>または<MyComponent></MyComponent>のいずれかで記述できます（ただし、一般的に<MyComponent/>が推奨されます）。 Introducing JSX の詳細。

念のため、特別なprops.childrenプロパティを介してコンポーネントのそれらの子にアクセスします。 JSXの詳細：JSX の子について。

これは、HTMLやXHTMLのようなnotではないことに注意してください。それは、異なるルールを持つ独自の（類似した）ものです。たとえば、HTMLでは、<div/>は<div>とまったく同じです。：startタグ。最終的には終了タグが必要です。そうではないJSX（またはXHTML）。 HTMLのルールは、void elements（brやimgなどのマークアップコンテンツを持たない要素）の有無にかかわらず記述できることです。 /の前の>で終了タグを取得することはありませんが、非void要素（divなど）には常に終了タグ（</div>）が必要です。自己閉鎖。 JSX（およびXHTML）では、可能です。

17
T.J. Crowder

自己終了タグの目的は、単純にそれがよりコンパクトであることです。これは、コンポーネントに通常親を囲む子がない場合に特に便利です。

そのため、通常leaf components（つまり、子を持たないコンポーネント）には、自己終了構文を使用します。お気に入り： <Component />。また、小道具があったとしても、次のことができます：<Component foo="bar" />。

ただし、childrenは小道具であるため、技術的にはcouldであることに注意してください。

<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が使用されることを意図したとおりに混乱させるため、強く推奨されません。あなたがしていることに自信がある場合にのみ、このバージョンを使用してください。

4
Chris