React处理组件之间的交互状态

React处理组件之间的交互状态

本文介绍了React处理组件之间的交互状态的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个显示元素onClick的简单组件:

  class MyComponent扩展React.Component {

state = {
isVisible:false
}

render(){
const {isVisble} = this.state
return(
< div>
{isVisble?
< div onClick = {()=> this.setState({isVisble:false})}>隐藏< / div> ;:
< div onClick = {()=> this.setState({isVisble:true})}> Show< / div>}
< / div>

}
}

我在其他组件中使用此组件三次:

 类MySuperComponent扩展React.Component {
render(){
return(
< div>
< MyComponent />
< MyComponent />
< MyComponent />
< / div>
)}
}

我需要在false时传递isVisible对于所有其他组件,如果其中一个具有isVisible为true



如何做到这一点?



谢谢

解决方案

您应该控制组件,因此将 isVisble 移动到props,然后从MySuperComponent分配它。 / p>

还向MyComponent传递回调,以便它可以通知父母是否要更改状态。



你' d想要一些数据结构来存储这些状态。



  class MySuperComponent扩展了React.Component {
构造函数(道具){
super(道具);
this.state = {children:[true,true,true]};
this.toggle = this.toggle.bind(this);
}

render(){
return(
< div>
{this.state.children.map((v,i)= >< MyComponent visible = {v} toggle = {()=> this.toggle(i)} />)}
< / div>

}

toggle(index){
this.setState({children:this.state.children.map((v,i)=> i!== index)});
}
}

类MyComponent扩展React.Component {
render(){
const text = this.props.visible? '可见':'隐藏';
return(< div onClick = {this.props.toggle}> {text}< / div>);
}
}


React.render(< MySuperComponent /> ;, document.getElementById('app'));


I have a simple component who show element onClick:

    class MyComponent extends React.Component {

       state = {
        isVisible : false
       }

     render() {
      const { isVisble } = this.state
      return(
      <div>
       {isVisble ?
        <div onClick={() => this.setState({isVisble: false})}>Hide</div> :
        <div onClick={() => this.setState({isVisble: true})}>Show</div>}
      </div>
     )
    }
}

I use this component three times in other component :

class MySuperComponent extends React.Component {
 render() {
  return(
  <div>
   <MyComponent />
   <MyComponent />
   <MyComponent />
  </div>
  )}
}

I need to pass isVisible at false for all other component if one of have isVisible to true

How to do that ?

Thanks

解决方案

You should have your component controlled, so move isVisble to props and and then assign it from MySuperComponent.

Also pass MyComponent a callback so it can inform the parent if it wants to change the state.

You'd want some data structure to store that states.

https://codepen.io/mazhuravlev/pen/qxRGzE

class MySuperComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {children: [true, true, true]};
        this.toggle = this.toggle.bind(this);
    }

    render() {
        return (
            <div>
                {this.state.children.map((v, i) => <MyComponent visible={v} toggle={() => this.toggle(i)}/>)}
            </div>
        )
    }

    toggle(index) {
        this.setState({children: this.state.children.map((v, i) => i !== index)});
    }
}

class MyComponent extends React.Component {
    render() {
        const text = this.props.visible ? 'visible' : 'hidden';
        return (<div onClick={this.props.toggle}>{text}</div>);
    }
}


React.render(<MySuperComponent/>, document.getElementById('app'));

这篇关于React处理组件之间的交互状态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-18 08:38