は、私は（）{私は以下のように復帰して2個のtrタグを使用したい

Question

返すTRでレンダリング2を使用したい：

render() { 
    return<tr>row1</tr><tr>row2</tr> 
} 

、それは私にエラーを与える：隣接するJSX要素を囲んで包まれなければなりませんタグ。

私はこれらを共通のコンポーネントで囲む必要があることを知っています。しかし、divタグにそのタグを書き込むと、たとえば：

return <div><tr>row1</tr><tr>row2</tr></div> 

私のレイアウトが変わります。

これを達成する方法はありますか？

Answer 1

親をラップしない2つの行（たとえばtd、tableなど）を実際にレンダリングする場合は、それに応じて子を「ラップする」2番目のコンポーネントを作成することをお勧めします。しかし、これはReact16以降でのみ有効です。あなたのrender方法で

const Main = props => { 
return props.children 
} 

：

render() { 
    return (
    <Main> 
     <tr>Row 1</tr> 
     <tr>Row 2</tr> 
    </Main> 
) 
} 

したい場合という扱いNPMパッケージもあります：https://github.com/gajus/react-aux