javascript - 为什么我无法在 React 类组件中创建变量？

Question

之前，我运行了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'));

...结果以一个奇怪的错误结束，显示类似“const 只能在 .ts 文件中使用”之类的内容。此后，我尝试将其更改为 let 和 var 但它们都不起作用。这是怎么回事!？

Answer 1

像这样定义内部状态或内部渲染方法

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} />
            }
        }