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

Question

我在 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)

浏览器的输出仅提供表单。我如何才能同时显示应用程序和表单

Answer 1

这里的问题是您正在挂载节点 <App/>但它不包含您的 <Form/>组件。

您只需调用 <Form/>在你的<App/>里面像这样的组件

class App extends React.Component {
  render() { 
    let helloWorld = 'Welcome to good programming React';
     return ( 
      <div className="App">
         <h2> {helloWorld}</h2>
         <Form/>
      </div>
     ); 
  }
}