在道具中传递函数未定义

Question

尝试将函数传递给子组件时，该函数未定义。其实我甚至不能直接在我的课堂上执行它。你认为有错字吗？

class FriendsPage extends Component { 
    constructor(props){ 
    super(props); 
    this.mylog = this.mylog.bind(this); 
    } 
    mylog(){ 
     console.log("test debug"); 
    } 
    renderItem(item) { 
     return (<User friend={item} key={item.id} mylog={this.mylog}/>); 
    } 

class User extends Component { 
    constructor(props){ 
    super(props); 
    } 
    render() { 
     this.props.mylog(); // <== This is undefined 
    ... 
    } 

Answer 1

工作正常。尽管如果您尝试在没有prop的情况下呈现​​3210而在其他任何位置都会将其命名为mylog，它将会是未定义的。

class FriendsPage extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 
     this.mylog = this.mylog.bind(this); 
 
    } 
 
    mylog() { 
 
     console.log("test debug"); 
 
    } 
 
    render() { 
 
     return (< User mylog = { 
 
      this.mylog 
 
     } 
 
     />); 
 
     } 
 
    } 
 
    class User extends React.Component { 
 
     constructor(props) { 
 
     super(props); 
 
     } 
 
     render() { 
 
     this.props.mylog(); 
 
     return <h1 > Hello < /h1>; 
 
     } 
 

 
    } 
 

 
    ReactDOM.render(< FriendsPage/> , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>