BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] How to avoid extra wrapping <div> in React?

2022-05-14 18:51:07

Question

Today I have started learning ReactJS and after an hour faced with the problem.. I want to insert a component which has two rows inside a div on the page.A simplified example of what I am doing below.

I have an html: 

<html>
..
  <div id="component-placeholder"></div>
..
</html>

Render function like this: 

...
render: function() {

    return(
        <div className="DeadSimpleComponent">
            <div className="DeadSimpleComponent__time">10:23:12</div >
            <div className="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
        </div>
    )
}
....

And below I am calling render: 

ReactDOM.render(<DeadSimpleComponent/>, document.getElementById('component-placeholder'));

Generated HTML looks like this: 

<html>
..
  <div id="component-placeholder">
    <div class="DeadSimpleComponent">
            <div class="DeadSimpleComponent__time">10:23:12</div>
            <div class="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div>
    </div>
</div>
..
</html>

The problem that I am not a very happy that React forcing me to wrap all in a div "DeadSimpleComponent". 明示的なDOM操作なしで、それのための最高の、そして簡単な回避策は何ですか？

update 2017/7/28です。ReactのメンテナはReact 16 Beta 1でその可能性を追加しました。

以来 React 16.2 になってから、こんなことができるようになりました。 

render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

どのように解決するのですか？

この要件はReactバージョン(16.0)で削除されました] 。 1 という要件が削除されたので、このラッパーを回避することができるようになりました。

React.Fragmentを使用すると、親ノードを作成せずに要素のリストをレンダリングすることができます、公式。 

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

詳しくはこちら フラグメント

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します