React - 渲染多个组件

Question

我有典型的 index.js 调用 App.js

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  
    <App />,
  
  document.getElementById('root')
);

App.js

import './App.css';
import Test from './Components/test'
import Test1 from './Components/test1'

function App() {
  return (
<Test/>,
<Test1/>
    );
}

export default App;

在构建 App.js 时，我想渲染 2 个组件 Test 和 Test1

当我运行此代码时，只有一个组件会被渲染。在这种情况下，只呈现 Test1。如果我切换顺序，则仅呈现 Test

有什么方法可以渲染 2 个组件？

Answer 1

您只能渲染一个组件，因此一种方法是将它们包装在一个组件中。例如，在 React Fragment 中，如下所示：

import { Fragment } from 'react'

...

return (
  <Fragment>
    <Test />
    <Test1 />
  </Fragment>
)

Fragment 只是一个包装器，它不提供任何功能。或者，您可以像这样包装您的组件：

return (
  <>
    <Test />
    <Test1 />
  </>
)

结果是一样的。

Answer 2

你需要把这个 Test 和 Test1 包装起来

import './App.css';
import Test from './Components/test'
import Test1 from './Components/test1'

function App() {
  return (
  <div>
    <Test/>,
    <Test1/>
  </div>
    );
}

export default App;

Answer 3

试试这个

function App() {
  return (
    <>
      <Test />
      <Test1 />
    </>
  )
}