javascript - 导入模块错误这是未定义的

Question

CounterView.js

import React from 'react';
const  CounterView =   <div>
    <h1>{this.state.counter}</h1>
    <button onClick={this.handleDecrement}>-</button>
    <button onClick={this.handleIncrement}>+</button>
</div>;
export default CounterView;

Counter.js

import React from 'react';
import CounterView from '../ComponentsView/CounterView.js';

class Counter extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            counter: 0,
        }
    }

    render() {
        return (
           < CounterView />
        )
    }

}

但是我得到了错误:

Uncaught TypeError: Cannot read property 'state' of undefined

请帮帮我。抱歉，我有第二个对我来说很受欢迎的问题:为什么我必须要求

  import React from 'react';

在我的应用程序的每个文件中？他在第一次通话中只需要一个？

Answer 1

相应地更改您的代码。您无法从子组件到达另一个组件状态。您可以使用 Prop 而不是状态。

CounterView.js

import React from 'react';
class CounterView extends React.Component{ 
    render() {
        return (
            <div>
                <h1>{this.props.counter}</h1>
                <button onClick={this.props.handleDecrement}>-</button>
                <button onClick={this.props.handleIncrement}>+</button>
            </div>
        );
    }
}
export default CounterView;

Counter.js

import React from 'react';
import CounterView from '../ComponentsView/CounterView.js';

class Counter extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            counter: 0,
        }
    }
    handleDecrement() {
      // do the decrements here
    }
    handleIncrement() {
      // do the increments here
    }
    render() {
        return (
           <CounterView counter={this.state.counter} handleDecrement={this.handleDecrement.bind(this)} handleIncrement={this.handleIncrement.bind(this)}  />
        )
    } 
}