이벤트를 전달하는 방법 및 방법

Question

한 구성 요소에서 다른 구성 요소로 이벤트를 전송하는 방법을 이해할 수 있습니까? 나는 그것이 자신의 구성 요소를 만드는 방법을 이해하지만 난 내 문제 :( 내가 렌더링해야 버튼을 두 번째 구성 요소를 클릭하는 또 다른 단어 항복

var ComponentOne = React.createClass({ 
 
    getInitialState: function() { 
 
    return {property: false}; 
 
    }, 
 
    handleSearch: function() { 
 
    this.setState({property: this.state.property ? false : true}); 
 
    }, 
 
    render: function() { 
 
    return (
 
     <div> 
 
     <a href="#" className="component-one" onClick={this.handleClick}>(show full)</a> 
 
     </div> 
 
    ); 
 
    } 
 
}); 
 

 
var ComponentTwo = React.createClass({ 
 
    style: function() { 
 
    return (???????) ? {display: "inline"} : {display: "none"} //I don't understand how to realized this 
 
    }, 
 
    render: function() { 
 
    return (
 
     <div className="component-two" style={this.style()}>Example</div>; 
 
    ); 
 
    } 
 
}); 
 

 
var App = React.createClass({ 
 
       // What properties? 
 
    render: fucntion() { 
 
    return (
 
     <div> 
 
     <ComponentOne /> //? 
 
     <ComponentTwo /> //? 
 
     </div> 
 
    ); 
 
    } 
 
}); 
 

 
ReactDOM.render(<App />, document.getElementById('content'))

.component-one, .component-two { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: yellow; 
 
}

<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="content"></div>

("없음"에서 표시를 "인라인"에서)

Answer 1

여기에 필요한 것은 중간 사람을 플레이하기위한 구성 요소입니다.이 중간 맨 구성 요소는 상태를 보유하고 조작하는 컨테이너 구성 요소가 될 수 있으며, 이미 상태 비 저장 구성 요소가 된 다른 두 구성 요소를 만들 수 있습니다. :

var ComponentOne = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <a href="#" className="component-one" onClick={this.props.clickHandler}>(show full)</a> 
     </div> 
    ); 
    } 
}); 

var ComponentTwo = React.createClass({ 
    style: function() { 
    return (this.props.showExample) ? {display: "inline"} : {display: "none"} 
    }, 
    render: function() { 
    return (
     <div className="component-two" style={this.style()}>Example</div> 
    ); 
    } 
}); 

var Controller = React.createClass({ 
    getInitialState: function() { 
    return {property: false}; 
    }, 
    handleSearch: function() { 
    this.setState({property: !this.state.property}); 
    }, 
    render: function() { 
    return (
     <div> 
     <ComponentOne clickHandler={this.handleSearch} /> 
     <ComponentTwo showExample={this.state.property}/> 
     </div> 
    ); 
    } 
}) 

var App = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <Controller /> 
     </div> 
    ); 
    } 
}); 

ReactDOM.render(<App />, document.getElementById('content')) 

덧붙여서, 컨트롤러 구성 요소에서 스타일을 숨기지 않고 ComponentTwo를 조건부로 렌더링 할 수 있도록이 방법을 사용하는 것이 좋습니다. 나는 당신이하고있는 특별한 이유가 있었을 경우를 대비해 스타일링 기능을 변경하고 싶지 않았지만 필요 없다면 Component2 만 렌더링한다고 말하고 싶습니다. http://jsfiddle.net/ozrevulsion/4rh31tou/

행운을 빕니다 : 여기

이 작업의 바이올린입니다!