類型錯誤：無法讀取屬性「道具」空的反應

-1

錯誤：未捕獲的類型錯誤：（：75：17）在babaClick無法讀取空的屬性「道具」在ES5如果i型它也不會是錯了，但如果我在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>

來源

2017-04-23 xxxindy

在你Btn類，則應該像HelloMesssage類（如babaZan={this.addZan.bind(this)}）中那樣，使用onClick處理程序添加.bind(this)。

因此，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> 
      ) 
     } 

    }

來源

2017-04-23 02:19:53 Aruna

感謝üSOOOO多！有用！！！！我的眼睛充滿了淚水！ – xxxindy

變化babaClick(){ this.props.babaZan(); }到箭頭的功能，以便它知道什麼「本」是：babaClick =() => { this.props.babaZan(); }

來源

2017-04-23 09:27:53 RKluska

是的，它的工作原理！非常感謝你！！ – xxxindy

類型錯誤：無法讀取屬性「道具」空的反應

回答

相關問題