[REACTJS] React.js 어떻게 자식 구성 요소에 대한 콜백을 전달하는 방법?

React.js 어떻게 자식 구성 요소에 대한 콜백을 전달하는 방법?

해결법

1. ---

   1.당신은 FirstNestedComponent에 속성으로 this.onUserInput 전달된다. 따라서 this.props.onUserInput로 FirstNestedComponent에 액세스해야합니다.

   당신은 FirstNestedComponent에 속성으로 this.onUserInput 전달된다. 따라서 this.props.onUserInput로 FirstNestedComponent에 액세스해야합니다.

   var FirstNestedComponent = React.createClass({
       render: function() {
           return (
               <div>
                   <SecondNestedComponent
                       onUserInput={this.props.onUserInput}
                   />
               </div>
           );
       }
   });
   

2. ---

   2.참고로, 내가 jsfiddle.net/kb3gN/12007에서 만든 구현을 확인하시기 바랍니다

   참고로, 내가 jsfiddle.net/kb3gN/12007에서 만든 구현을 확인하시기 바랍니다

   function ListenersService(){
       var listeners = {};
       this.addListener = function(callback){
           var id;
           if(typeof callback === 'function'){
               id = Math.random().toString(36).slice(2);
               listeners[id] = callback;
           }
           return id;
       }
       this.removeListener = function( id){
           if(listeners[id]){
               delete listeners[id];
               return true;
           }
           return false;
       }
       this.notifyListeners = function(data){
           for (var id in listeners) {
             if(listeners.hasOwnProperty(id)){
               listeners[id](data);
             }
           }
       }
   }
   
   function DataService(ListenersService){
       var Data = { value: 1 };
       var self = this;
   
       var listenersService = new ListenersService();
       this.addListener = listenersService.addListener;
       this.removeListener = listenersService.removeListener;
       this.getData = function(){
           return Data;
       }
   
       setInterval(function(){
           Data.value++;
           listenersService.notifyListeners(Data);
       }, 1000);
   }
   var dataSevice = new DataService(ListenersService);
   
   var World = React.createClass({
       render: function() {
           return <strong>{this.props.data.value}</strong>;
       }
   });
   
   var Hello = React.createClass({
       getInitialState: function() {
           return {
             data: this.props.dataService.getData()
           };
       },
       componentDidMount: function() {
           this.props.dataService.addListener(this.updateHandler)
       },
       updateHandler: function(data) {
           this.setState({
             data: data
           });
       },
       render: function() {
           return (
               <div>
                   Value: <World data={this.state.data} />
               </div>
           );
       }
   });
   
   React.renderComponent(<Hello dataService={dataSevice} />, document.body);
   

from https://stackoverflow.com/questions/28909171/react-js-how-to-pass-callbacks-to-child-components by cc-by-sa and MIT license