代码之家 › 专栏 › 技术社区 › Grateful Lakshmi Swetha G

为什么我不能在React类组件中创建变量?

reactjs javascript

Grateful Lakshmi Swetha G · 技术社区 · 4 年前

早些时候,我跑了 npx create-react-app my-app .在试用时,我意识到我的编辑器不允许我向react类组件添加任何变量!所以,在下面。。。

import React from 'react';
import ReactDOM from 'react-dom';


class CComponent extends React.Component {
    const foo = 'sdf'; // problematic

    render() {
        return <input type="text" value={this.props.name} />
    }
}

ReactDOM.render(<CComponent name="Bismillah" />, document.getElementById('root'));

let 和 var 但它们都不起作用。发生什么事!?

3 回复 | 直到 4 年前

akhtarvahid 4 年前

class CComponent extends React.Component {
       state={foo:'sdf'}
        handleClick=()=>{
         alert('Hey...Welcome to SO')
        }
        render() {
            return( 
                <>
                <input type="text" value={this.props.name} />
                <button onClick={this.handleClick}>Click</button>
                </>
              )
        }
    }

内部渲染

class CComponent extends React.Component {
            render() {
                const foo = 'sdf'; 
                return <input type="text" value={this.props.name} />
            }
        }

Sydney Y 4 年前

在类中,可以使用构造函数将变量分配给类:

class CComponent extends React.Component {
  constructor(){
    this.foo = "bar"; // 'this' is used within the whole class to refer to the class itself.
  }
  render () {
    return null
  }
}

Junius L. 4 年前

在Javascript类中,公共字段声明不使用 const ,移除 常数

class CComponent extends React.Component {

   foo = 'sdf';

 //create a method
 getFoo = function() {
   return this.foo;
 }

  render() {
    return <input type="text" value={this.props.name} />
  }
}

JS Classess