Reactコンポーネントで文字列を子としてレンダリングするにはどうすればよいですか？</p> <pre><code>function MyComponent({ children }) { return children; } </code></pre> <p>これは動作します：

Question

は単純なコンポーネント取る

ReactDOM.render(<MyComponent><span>Hello</span></MyComponent>, document.getElementById('stage')); 

をしかし、これはしませんが（私は<span/>を削除）：

ReactDOM.render(<MyComponent>Hello</MyComponent>, document.getElementById('stage')); 

にrenderを呼び出そうとし反応するので文字列：

Uncaught TypeError: inst.render is not a function 

一方

、これは正常に動作します：

ReactDOM.render(<p>Hello</p>, document.getElementById('stage')); 

にはどうすれば<p/>よう<MyComponent/>振る舞いをするのですか？

Answer 1

少なくとも1つのトップレベルHTML要素が必要です。あなたのコンポーネントは本当に単に文字列を出力することはできません、それはReactの仕組みではありません。

最も簡単な解決策は、MyComponentをスパンまたはdivに出力することです。

function MyComponent({ children }) { 
    return <span>{ children }</span>; 
} 

Answer 2

まあ差が<p>では、html要素であるとMyComponentが反応コンポーネントです。

リアクターコンポーネントは、をレンダリングするか返す必要があります。単一コンポーネントまたは単一のhtml要素です。

'Hello'ではありません。

Answer 3

リアクションは、リアクションコンポーネント（クラス）またはHTMLタグ（文字列）のいずれかをレンダリングできます。どのHTMLタグも、大文字小文字でコンポーネントが大文字になっています。すべてのReactコンポーネントは、1つのタグ（またはnull）を正確に表示する必要があります。あなたの質問に答えるには：できません。

上記の例では、children属性で指定されているものをレンダリングし、タグを内部にレンダリングする場合、または無効な文字列をレンダリングします。

Answer 4

現在、コンポーネントのレンダリングでは、1つのノードのみを返すことができます。 返すdivのリストがある場合は、divやspanなどのコンポーネント内にコンポーネント をラップする必要があります。

source

そして、あなたが戻ってきていることは、ルートノードではありません。あなたは、HTML要素を返すはずの文字列を返す反応コンポーネントを返しています。

（すでにあなたの例で行ったように）あなたは既にHTML要素でラップあなたの文字列を渡すことができますいずれか、またはあなたがこの

function MyComponent({ children }) { 
    return <span>{ children }</span>; 
} 

のようなあなたの「MyComponentの」内部のHTML要素で、あなたの文字列をラップすることができます