如何在 React 中添加没有构造函数类的 Statefull 组件？

通常，我们在构造函数类中设置组件的初始状态，并使用 setState 方法更改状态。基本上，在 React 中，我们编写称为 JSX 的看起来像 HTML 的代码。 JSX 不是有效的 JavaScript 代码，但为了让开发人员的生活更轻松， BABEL负责将 JSX 转换为有效的 JavaScript 代码，并允许开发人员以 HTML 外观的语法编写代码。同样，没有构造函数类也无法初始化状态，当我们再次在构造函数类外部初始化状态时，Bable 阅读了语法并理解需要在类内部创建构造函数并在幕后完成所有必需的艰苦工作。这称为类财产提案。

语法：使用语法在构造函数类之外初始化状态。

state = {stateName1:stateValue1, 
         stateName2:stateName2, 
         ....... 
         stateNamek:stateValuek}

示例 1：此示例说明如何在没有构造函数的情况下对属性提案进行分类以初始化状态

index.js：

文件名 – App.js

Javascript

import React, { Component } from 'react'
 
class App extends Component {
   
  // The class property proposal
  // The state initialization without
  // constructor class
  state = {msg : 'Hi, There!'}
 
  handleClick(){
    // Changing state
    this.setState({msg : 'Welcome to the React world!'})
  }
   
  render(){
    return (
      

        
Message :
         
 
 
{this.state.msg}
 
 
 
         
        {/* Set click handler */}
         this.handleClick()}>
          Click here!
        
      
    )
  }
}
 
export default App

输出：

示例 2：此示例说明如何在没有构造函数的情况下对属性提案进行分类以初始化状态

index.js：

Javascript

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
 
ReactDOM.render(, document.querySelector('#root'))

应用程序.js：

Javascript

import React, { Component } from 'react'
 
class App extends Component {
  static defaultProps = {
    courseContent : [
      'JSX', 'React Props', 'React State',
      'React Lifecycle Methods', 'React Event Handlers',
      'React Router', 'React Hooks', 'Readux',
      'React Context'
    ]
  }
 
  // The class property proposal
  // The state initialization without
  // constructor class
  state = {msg : 'React Course', content:''}
 
  renderContent(){
    return (
      

        {this.props.courseContent.map(content => (
          
{content}
        ))}
      
    )
  }
 
  handleClick(){
    //changing state
    this.setState({
      msg : 'Course Content',
      content : this.renderContent()
    })
  }
   
  render(){
    return (
      

        
Message :
         
 
 
{this.state.msg}
 
 
 
         
 
 
{this.state.content}
 
 
 
         
        {/* set click handler */}
         this.handleClick()}>
          Click here to know contents!
        
      
    )
  }
}
 
export default App

输出：