React & 如何传递事件

Question

你能帮我理解如何将事件从一个组件转移到另一个组件吗？我明白它是如何在自己的组件中实现的，但我放弃了我的问题:( 另一个词当我点击按钮时第二个组件应该呈现（显示从 "none" 到 "inline"）

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'))

顺便说一句，我想我应该提一下，这样做你可能会在 Controller 组件中有条件地呈现 ComponentTwo 而不是使用样式来隐藏它。我不想更改样式功能，以防万一有特定原因，但如果没有，那么我会说只在需要时渲染 Component2。

这是此工作的 fiddle：http://jsfiddle.net/ozrevulsion/4rh31tou/

祝你好运！

React & 如何传递事件

React & how to transfer event

frontend

reactjs