Adjacent JSX elements must be wrapped in an enclosing tag【React Native エラー】

スポンサーリンク
man

困ってる人
何だこれ?

SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…?????


こんにちは、ヨロと申します。

今回は、SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…? というエラーが出た場合の解決方法という事で、

エラーの意味合いとしては、

JSX elementsはタグで囲む必要があるよという、エラー内容を読んでそのままの意味、

React Nativeでコンポーネントを作る場合は、親要素が一つじゃなきゃダメ。

例を挙げるとしたら、

// React Nativeエラー

import React from ‘react’;
import { StyleSheet, Text, View } from ‘react-native’;

export default function App() {
return (

<View>
<View>
<View>
<Text>テキスト</Text>
</View>
</View>
</View>

<View>
<View>
<Text>テキスト</Text>
<Text>テキスト</Text>
</View>
</View>

);
}

例えばこんな感じだと、同じレベルの要素(親要素)が、中に2つ並んでしまうとダメ(エラーが出る)

解決方法としては、

これらを何か別の要素で囲んであげるだけでOK。

例えば、

// React Native(親要素を1つだけにしてエラーをなくす)

import React from ‘react’;
import { StyleSheet, Text, View } from ‘react-native’;

export default function App() {
return (

<View> // これ1つで囲めばOK(これが親要素になる)

<View> // 中身はいくつ同じレベルの要素で並んでも大丈夫
<View>
<View>
<Text>テキスト</Text>
</View>
</View>
</View>

<View>
<View>
<Text>テキスト</Text>
<Text>テキスト</Text>
</View>
</View>

</View>

);
}

これならOK。

もう少し見やすくシンプルに分かりやすく書くと、

// React Nativeエラーの対処、解決方法

return ( // エラーが出るパターン
<View></View> // 同じレベルの要素がここに2つある
<View></View> // 同じレベルの要素がここに2つある
)

return ( // OKなパターン
<View> // これが親要素になり、同じレベルの要素は他にない
<View></View> // 中の要素は1つじゃなくてもOK
<View></View> // 中の要素は1つじゃなくてもOK
</View>
)

と、これならOK。

エラーが出た時に注意する事としては、

同じレベルの階層にある要素が、どこかに混ざって無いか?などを確認してみるといいかも。

終わり。

コメント

タイトルとURLをコピーしました