Question

错误：未捕获的TypeError：无法读取属性＆＃39;道具＆＃39;为null 在巴巴点击（：75：17）如果我在ES5中输入它就不会错，但如果我在es6中输入它就像下面的代码一样，那就错了。我只是不知道为什么......

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloMessage</title>
<script src="lib/react.js"></script>
<script src="lib/react-dom.js"></script>
<script src="lib/babel.min.js"></script>
<script type="text/babel">
    class HelloMesssage extends  React.Component{
        constructor(props){
            super(props)
            this.state={
                zan:0
            }

        }
        addZan(){
            this.setState(
                    {
                        zan:this.state.zan+1
                    }
            )
        }
        render(){
            return(
                    <div>
                        <p>姓名：{this.props.name}</p>
                        <p>赞：<Zan zan={this.state.zan}/></p>
                        <p><Btn babaZan={this.addZan.bind(this)}/></p>
                    </div>
            )
        }
    }
    class Btn extends  React.Component{
        babaClick(){
            this.props.babaZan();
        }
        render(){
            return(
                    <button onClick={this.babaClick}>赞</button>
            )
        }

    }
    class Zan extends  React.Component{
        render(){
            return(
                    <span>{this.props.zan}</span>
            )
        }
    }
    ReactDOM.render(
            <HelloMesssage name="xxxindy"/>,
            document.getElementById('container')
    );
</script>
<div id="container"></div>

Answer 1

在下面的Btn课程中，您应该像使用.bind(this)类HelloMesssage一样添加babaZan={this.addZan.bind(this)} onClick处理程序。

因此，onClick将变为onClick={this.babaClick.bind(this)}，如下所示。

注意：在ES6中，它需要.bind(this)，而在ES5中，这不是必需的。

class Btn extends  React.Component{
        babaClick(){
            this.props.babaZan();
        }
        render(){
            return(
                    <button onClick={this.babaClick.bind(this)}>赞</button>
            )
        }

    }

Answer 2

将babaClick(){ this.props.babaZan(); }更改为箭头功能，以便了解＆＃34;此＆＃34;是：babaClick = () => { this.props.babaZan(); }

TypeError：无法读取属性＆＃39; props＆＃39;反应中的null

2 个答案: