时间戳

首页 > 解决方案 > 两个组件可以在 reactjs 中显示

javascript - 两个组件可以在 reactjs 中显示

问题描述

我在 reactjs 的同一个工作空间中有两个组件，但只有一个正在显示

import React, { Component } from 'react';
import logo, { ReactComponent } from './logo.svg';
import './App.css';
import ReactDOM from "react-dom";
class App extends React.Component {
  render() { 
    let helloWorld = 'Welcome to good programming React';
     return ( 
      <div className="App">
         <h2> {helloWorld}</h2>
          </div>
           ); 
          }
}

ReactDOM.render(<App />, document.getElementById('root')); 
class   Form    extends React.Component {   
    constructor(props)  {       
    super(props)                
    this.state  =   {   username:   ''  }
    this.handleChange   =   this.handleChange.bind(this)
    this.handleSubmit   =   this.handleSubmit.bind(this)
  }
  handleChange(event)   {       
  this.setState({   value:  event.target.value  })  
  }
  handleSubmit(event)   {
  alert(this.state.username)
  event.preventDefault()    
  }
  render()  {   
  return    (   
  <form onSubmit={this.handleSubmit}>
        <input type="text" value={this.state.username}  onChange={this.handleChange} /> 
      <input    type="submit"   value="Submit"  />
      </form>               
      )     
    } 
  }
export default (App,Form)

浏览器的输出只给出了表单。我如何才能同时显示 App 和表单

标签： javascriptreactjs

解决方案

你可能不理解 React 是如何工作的，并且你可能对这段代码感到困惑

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

这段代码本质上所做的是将AppComponent 渲染到index.htmlid中的元素中root。您的第二个组件未呈现的原因是因为它没有经历 aReactDOM.render也不包含在App组件中。

按照惯例，App组件应该是唯一体验的组件ReactDOM.render，所有其他要渲染的组件都必须在App组件内部。就像@sudo97 所说的那样

推荐阅读