Reactjs：访问兄弟组件的“this”

Question

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

<View> 是 <Content> 和 <Footer> 的父级。现在<Footer> 中有一个按钮，当它被点击时，我想在<Content> 组件中渲染一个Overlay，所以我必须能够访问我的@987654332 中<Content> 组件的this @ 零件。我不知道如何做到这一点。

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

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

如果您想从Footer 访问Content 组件中的函数，您必须将该函数作为prop 从Footer 提供给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。

Answer 2

如果您使用 Redux 或 Flux，更好的方法是调度一些操作“DISPLAY_OVERLAY”。将一些 reducer 或存储值更改为 true，例如 reducer.displayOverlay=true；然后在 Content 组件的渲染方法中使用该 reducer 值。

  render:function(){
    return <div>
    {reducer.displayOverLay? this.showOverlay():this.hideOverlay()}
    </div>
    } 

如果您不使用flux 或redux，请使用您的视图组件状态。在您的视图组件状态中设置状态变量showOverlay:false。然后将showOverlay 传递给Content 组件

<Content showOverlay={this.state.showOverlay}/>

然后

查看

toggleOverLay(){
   this.setState({
       showOverlay:!this.state.showOverlay
    })
}
render() {
  //some code
  <Content showOverlay={this.state.showOverlay}/>
  //some code
  <Footer toggleOverlay={this.toggleOverlay} />
}

页脚

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

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

Answer 3

通过这样做，我可以在 <Footer> 组件中访问 <Content> 的“this”。现在我不确定我是否在道德上做错了事，伤害了 Reactjs 单向绑定的动机。我也在使用 redux，但是如何在 store 的帮助下解决这个问题。建议是非常可观的，因为我真的很困惑

View.js

class View extends Component {

  constructor(props,context){
    super(props,context);
    this.state = {
      thisOfContent: false    
    }
  }

  handleUpdateValue(newThisOfContent) {
    this.setState({
      thisOfContent: newThisOfContent
    })  
  }

  render() {
    return (
      <div>
        <Content handleUpdateValue={this.handleUpdateValue.bind(this)}/>
        <Footer stateValue={this.state.thisOfChatWindowContent}/>
      </div>
    )
  }

}

Content.js

class Content extends Component {

  componentDidMount() {
    this.props.handleUpdateValue(this);
  }

  render() {
    return (
      <div>

      </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={this.props.stateValue}
                target={() => ReactDOM.findDOMNode(this.refs.targetEmojiPicker)}
            >
              <EmojiModalCategories actions={this.props.actions}/>
            </bootstrap.Overlay>
          </div>
        </div>
      </div>

    )
  }

}