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

Question

已关闭。此问题需要 debugging details 。目前不接受答案。

---

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem 。这将有助于其他人回答问题。

已关闭 4 年前。

Improve this question

我有一个错误，说 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)

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