は、のようなものを活字体で子コンポーネント（TSX）

Question

に反応しますエラーなしで複数の子要素を持つこれらの小道具とコンポーネントを使用します。

<MyComponent> 
    <div>hello</div> 
    <div>world</div> 
</MyComponent> 

をこれは活字体1.8.30.0と罰金コンパイルが、実行時にそれが壊れる：

Invariant Violation: ReactDOM.render(): Invalid component element. 

コンポーネントのコードは、そのシナリオのために書かれているので、それは、一つだけ<div/>子要素で動作しません。これは私にはバグのように思える - 私はそれが2つの<div/>要素がchildrenの定義と一致しないことを実現することが期待しました。私は何かが欠落している場合に備えて、まず問題を開く前にここで尋ねると思った。

それはthis.props.children経由でのみ、単一の子を必要とすることは可能ですか、私は特定の小道具を追加する必要がありますか？

Answer 1

あなたは、以下の関連情報を見つけることができます。引用する

Single Child

：

をReact.PropTypes.elementを使用すると、単一の子供は子供としてコンポーネントに渡すことができるように指定することができます。

それだけで一人の子供を強制することが可能です。

var MyComponent = React.createClass({ 
    propTypes: { 
    children: React.PropTypes.element.isRequired 
    }, 

    render: function() { 
    return (
     <div> 
     {this.props.children} // This must be exactly one element or it will warn. 
     </div> 
    ); 
    } 
});