react js中如何调用多个组件同时显示？

Question

我正在调用两个组件 Welcome 和 Datecomp。但是当我运行时，Welcome组件没有显示，只有Datecomp组件显示。

index.js
   import React from 'react';
   import ReactDOM from 'react-dom';
   import Welcome,{DateComp} from './Welcome';
   ReactDOM.render(<Welcome/>,document.getElementById('root'));
   ReactDOM.render(<DateComp/>,document.getElementById('root'));

Welcome.js
 import React, { Component } from 'react';
 class Welcome extends Component {
    render(){
    return(
            <div>
                <h1>Welcome User</h1>
                <p>What is React? React is a declarative,efficient, and flexible 
                JavaScript library for <br />
                building user interfaces. It lets you compose complex UIs 
                from small and <br />isolated pieces of code called "components".
                </p>
            </div>
            );
    } 
 }
class DateComp extends Component {
  constructor(){
  super()
  var today = new Date(),
  date = today.getDate()+'/'+(today.getMonth()+1)+'/'+today.getFullYear();
  this.state={
      currentDate:date
  }
  }
      render(){
  return(
      <div style={{float: "right"}}>         
      Dated:
      {this.state.currentDate}
      </div>
      );
  } 
}
export default Welcome;
export {DateComp};

Answer 1

您不能那样做，您正在替换 root 元素内部的内容，因此只会显示最后一个组件，即 <DateComp/>。使用组件组合。像这样。

index.js
   import React from 'react';
   import ReactDOM from 'react-dom';
   import Welcome,{DateComp} from './Welcome';
   ReactDOM.render(<App/>,document.getElementById('root'));

app.js

const App = () => {
       return (<div>
                <Welcome/>
                <Datacomp/>
              </div>)
    }

Answer 2

问题

ReactDOM.render(<DateComp/>,document.getElementById('root')); 践踏 #root div 被 ReactDOM.render(<Welcome/>,document.getElementById('root')); 渲染的内容。每个 DOM 个节点只能渲染一个 React 应用程序。

解决方案

将每个渲染到 不同的 DOM节点，两个 React 应用程序。（可能不是你想要的）。

import React from 'react';
import ReactDOM from 'react-dom';
import Welcome, {DateComp} from './Welcome';

ReactDOM.render(<Welcome/>, document.getElementById('root1'));
ReactDOM.render(<DateComp/>, document.getElementById('root2'));

将每个渲染成单个节点，单个 React 应用程序。

import React from 'react';
import ReactDOM from 'react-dom';
import Welcome, {DateComp} from './Welcome';

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

react js中如何调用多个组件同时显示？

How to call multiple components in react js and display simultaneously?

components

jsx

reactjs

问题

解决方案