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

您需要将此测试和测试 1 包装成一些包装

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

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

export default App;

Answer 2

试试这个

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

Answer 3

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

import { Fragment } from 'react'

...

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

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

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

结果是一样的。

React - 渲染多个组件

React - Render more than one Component

javascript

components

reactjs