小道具に関数を渡すことは定義されていません

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

正常に動作します。​​3210をprop（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>