정의되지 않은 'handleClick'속성을 읽을 수 없습니다.

Question

나는 새로워서 반응이 없으므로 이것을 파악할 수 없습니다. 클릭 할 때 탭의 내용을 표시하는 동적 탭을 만들려고합니다. 콘솔에서 "정의되지 않은"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 메서드 내에서 ()을 사용하여 두 자식 구성 요소를 렌더링하는 메서드를 호출해야합니다. renderContent 함수 옆에 배열이 아닌 한 번에 하나의 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

는 렌더링 방법지도를 할 때 당신은 응용 프로그램의 this을 잃고 앱의 생성자 this.renderTab = this.renderTab.bind(this);

이 추가, 그것은 기능이 아니다라고 그 이유는.