javascript - Reactjs:访问同级组件的 'this'

Question

我的情况是我有 3 个组件； <View> <Content>和 <Footer> .

<View>是 <Content> 的父级和 <Footer> .现在<Footer>中有一个按钮单击它时，我想呈现一个 Overlay在<Content>组件，所以我必须访问 this的 <Content>我的内部组件 <Footer>成分。我不知道如何做到这一点。

View.js

class View extends Component {
  render() {
    return (
      <div>
        <Content messages={this.props.messages}/>
        <Footer />
      </div>
    )
  }
}

Content.js

class Content extends Component {
  render() {
    return (
      <div>
        {this.props.messages}
      </div>
    )
  }

}

Footer.js

class Footer extends Component {
  constructor(props,context){
    super(props,context);
    this.state = {
      showEmojiPicker: false,
    }
  }

  handleToggleEmojiPicker() {
    this.setState({
      showEmojiPicker: !this.state.showEmojiPicker,
    });
  }

  render() {
    return (
      <div>
        <div>
          <div>
            <bootstrap.Button ref="targetEmojiPicker" bsSize="xsmall" onClick={this.handleToggleEmojiPicker.bind(this)}>
              <bootstrap.Glyphicon glyph="heart" />
            </bootstrap.Button>
              <bootstrap.Overlay
                  show={this.state.showEmojiPicker}
                  onHide={this.handleClose.bind(this)}
                  container={content.this}  //Need this of Content component
                  target={() => ReactDOM.findDOMNode(this.refs.targetEmojiPicker)}
              >
              <EmojiModalCategories actions={this.props.actions}/>
            </bootstrap.Overlay>
          </div>
        </div>
      </div>

    )
  }

}

Answer 1

您应该阅读 Communicate between components官方 React 文档的页面。

如果您想从 Footer 访问 Content 组件中的函数，您必须将该函数作为 prop 提供给View 中的 Footer。

假设您想运行 Content 组件中的 showOverlay() 函数，您可以这样做:

查看

displayOverlay = () => {
  this.refs.content.showOverlay();
}

render() {
  //some code
  <Content ref="content" />
  //some code
  <Footer overlayButtonClick={this.displayOverlay} />
}

页脚

btnClick = () => {
  this.props.overlayButtonClick();
}    

render() {
  //some code
  <button onClick={this.btnClick}>Click</button>
  //some code
}

---

编辑 2017 年 8 月

请注意，现在已弃用对 ref 值使用字符串文字。有关更多信息，您可以查看我之前的回答，here .