时间戳

首页 > 解决方案 > reactjs中如何调用多个组件同时显示？

reactjs - reactjs中如何调用多个组件同时显示？

问题描述

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

我正在调用两个组件 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};

标签： reactjscomponentsjsx

解决方案

您不能这样做，您正在替换元素内部的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>)
    }

推荐阅读