未定義の 'handleClick'プロパティを読み取ることができません

Question

私はReactを初めて使用しており、これを把握することはできません。私は、クリックするとタブのコンテンツを表示する動的なタブを作成しようとしています。コンソールで「未定義のhandleClick 'プロパティを読み取ることができません」というメッセージが表示されます。ここで私がこれまで持っているものです。

<script type="text/babel"> 
    class App extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
     tabs: [ 
      {id: 0, name: 'Foo'}, 
      {id: 1, name: 'Bar'}, 
      {id: 2, name: 'Fizz'} 
     ], 
     contents: [ 
      {name: 'Foo', content: 'Hello'}, 
      {name: 'Bar', content: 'World'}, 
      {name: 'Fizz', content: 'Buzz'}, 
     ] 
     }; 
     this.handleClick = this.handleClick.bind(this); 
    } 
    handleClick() { 
     console.log('Hi'); 
    } 
    renderTab(tab) { 
     return(<Tab key={tab.id} 
        value={tab.name} 
        onClick={() => this.handleClick()} 
        /> 
    ); 
    } 
    renderContent(i) { 
     return(<Content content={this.state.contents}/>); 
    } 
    render() { 
     return(
     <div className="container-tabs"> 
      <div className="tab"> 
      {this.state.tabs.map(this.renderTab)} 
      </div> 
      <div className="tabcontent"> 
      <p>{this.renderContent}</p> 
      </div> 
     </div> 
    ) ; 
    } 
    } 

    class Tab extends React.Component { 
    constructor(props) { 
     super(props); 
    } 
    render() { 
     return (
     <button className="tablinks" 
       onClick={() => this.props.onClick()}> 
      {this.props.value} 
     </button> 
    ); 
    } 
    } 

    class Content extends React.Component { 
    constructor(props) { 
     super(props); 
    } 
    render() { 
     return (
     <div className="tabcontent"> 
      {this.props.content} 
     </div> 
    ); 
    } 
    } 

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

Answer 1

アプリには多くの問題がありました。私はそれらのすべてを修正し、新しいAppコンポーネントはこのようにすべきです。まず、renderメソッドの内部で、2つの子コンポーネントを呼び出す必要があります。()を使用してメソッドをレンダリングします。 renderContent関数の隣には、配列ではなく一度に1つのcontentインスタンスを渡す必要があります。私はそれが下で動作するように私が作ったすべての変更とAppコンポーネントを投稿しました。

import React, { Component } from 'react'; 
import Tab from './tab'; 
import Content from './content'; 

export default class App extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      tabs: [ 
      {id: 0, name: 'Foo'}, 
      {id: 1, name: 'Bar'}, 
      {id: 2, name: 'Fizz'} 
      ], 
      contents: [ 
      {name: 'Foo', content: 'Hello'}, 
      {name: 'Bar', content: 'World'}, 
      {name: 'Fizz', content: 'Buzz'}, 
      ] 
     }; 
     this.handleClick = this.handleClick.bind(this); 
     } 

     handleClick() { 
     console.log('Hi'); 
     } 

     renderTab(tab) { 
     return(<Tab {...tab} 
        onClick={this.handleClick} 
        /> 
     ); 
     } 
     renderContent(content) { 
     console.log(this.state.contents); 
     return(<Content {...content}/>); 
     } 

     render() { 
     return(
      <div className="container-tabs"> 
      <div className="tab"> 
       {this.state.tabs.map(tab => this.renderTab(tab))} 
      </div> 
      <div className="tabcontent"> 
       <p>{this.state.contents.map(content => this.renderContent(content))}</p> 
      </div> 
      </div> 
     ) ; 
     } 
} 

最後にrendertab関数を呼び出す必要があります。マップ配列ヘルパーを正しく使用していません。

{this.state.tabs.map(tab => this.renderTab(tab))} 

希望します。ハッピーコーディング。

Answer 2

はrenderメソッドでマップを行うときには、アプリケーションのthisを失っているアプリケーションのコンストラクタthis.renderTab = this.renderTab.bind(this);

にこれを追加し、それが機能しませんと言う理由です。