时间戳

首页 > 解决方案 > 为什么我不能在 render 方法中使用 2 个 JSX 标签？

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

问题描述

我有一个错误说 jsx 应该在封闭标记 <>... 内，但只有当我放置 2 条 jsx 行时（在本例中为：文本和图像）。我做错了什么？

我是一个非常初学者


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)

标签： javascriptreact-native

解决方案

每个反应组件必须返回封装在单个父级中的标记：

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

推荐阅读