Study/React

Pass an Event Handler as a prop

더 멋진 세상을 꿈꾸는 개발자 2020. 5. 27. 12:15

Pass an Event Handler as a prop

 

당신은 Talker 컴포넌트 클래스에 새로운 메소드를 선언했다. 

 

이제 당신은 또 다른 컴포넌트에 함수를 전달할 준비가 되었다. 

 

당신이 다른 어떤 정보에 전달하는 것과 정확하게 같은 방법으로 method를 전달할 수 있다. 

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from './Button';

class Talker extends React.Component {
  talk() {
    let speech = '';
    for (let i = 0; i < 10000; i++) {
      speech += 'blah ';
    }
    alert(speech);
  }
  
  render() {
    return <Button talk={this.talk} />;  // 뽀인트
  }
}

ReactDOM.render(
  <Talker />,
  document.getElementById('app')
);