Question

我有一个错误，说jsx应该放在一个封闭的标签<> ...中，但是只有当我放2条jsx行（在这种情况下是Text和Image）时，我才出错。我在做什么错了？

我是一个初学者


export default class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <Text>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</Text>
      <Image source={pic} style={{width: 193, height: 110}}/>
    );
  }
}

相邻的JSX元素必须包装在一个封闭的标签中。您是否想要JSX片段<> ...？（11：6）

Answer 1

每个react组件必须返回封装在单个父对象中的标记：

return (
 <div>
  <Text>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</Text>
  <Image source={pic} style={{width: 193, height: 110}}/>
 </div>
);

或片段样式

return (
 <>
  <Text>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</Text>
  <Image source={pic} style={{width: 193, height: 110}}/>
 </>
);

请参见https://reactjs.org/docs/fragments.html

Answer 2

您需要用<ReactFragment />或任何顶级元素（例如<div>）包装元素。您不能返回这样的多个元素。

<>
    <Text>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</Text>
    <Image source={pic} style={{width: 193, height: 110}}/>
</>

<>是<ReactFragment>的简写

Answer 3

您的JSX代码最终使用Babel或其他编译器转换为JS代码。

<Text>将转换为类似ReactDom.createElement('Text', {}, {});

鉴于您当前编写代码的方式，它将被编译为一个函数，该函数返回两个函数调用。根本不可能。

因此，您始终只能返回一个顶级元素。但是，您可以随意在顶层元素中包装任意数量的元素。

Answer 4

当要渲染多元素时，必须将所有元素包装在容器上看

<div>
    <Text>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</Text>
    <Image source={pic} style={{width: 193, height: 110}}/>
</div>

或使用React.fragment

 <Text>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</Text>
    <Image source={pic} style={{width: 193, height: 110}}/>

</React.Fragement>

或使用这个sahpe

<>
<Text>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</Text>
    <Image source={pic} style={{width: 193, height: 110}}/>
</>

为什么我不能在render方法中使用2个JSX标签？

4 个答案: