TX004

<Text>内にネストされた<Box>

コンソール

Text.js error TX004: <Box> cannot be nested inside <Text>.

発生原因

<Text> は連続するインラインテキストをレイアウトするため、Flexboxコンテナーを含めることはできません。<Box>(または <Spacer> や <Divider> など、<Box> をレンダリングするコンポーネント)が <Text> の内側でレンダリングされました。

修正方法

<Box> を外に移し、兄弟要素のテキストを横一列に並べます。

// Before<Text>  Status: <Box><Text color="green">ok</Text></Box></Text>// After<Box flexDirection="row">  <Text>Status: </Text>  <Text color="green">ok</Text></Box>

<Text> のネストは問題ありません。インラインのスパンとしてレンダリングされます。