Reactjs - 한 구성 요소에서 다른 구성 요소로 상태 값 전달

Question

두 구성 요소 SideNav 및 Dashboard (두 개는 서로 다른 js 파일에 있음)가 있습니다. SideNav는 필터로서 selectbox를 갖습니다. 대시 보드 구성 요소에서 사이드 바 구성 요소로 배열을 전달해야합니다. 이 배열은 선택 상자 (sidenav 구성 요소 내부에 있음)의 값으로 지정해야합니다.

class Dashboard extends Component { 
    constructor(props) { 
    super(props); 
    this.state = {viz:{},filterData:{}}; 
    } 
    var data1= ['1','2','3']; 
    this.setState({data1: data1}, function() { 
    console.log(this.state.data1); 
    }); 

}

//Sidebar 

class Sidebar extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     data: ['opt1','opt2'] 
    }; 
    } 

    handleClick(e) { 
    e.preventDefault(); 
    e.target.parentElement.classList.toggle('open'); 
    this.setState({data: this.state.data1}, function() { 
     console.log(this.state.data); 
    }); 
    } 

    render() { 

    const props = this.props; 
    const handleClick = this.handleClick; 

    return (
     <div className="sidebar"> 
     <nav className="sidebar-nav"> 
      <Nav> 
      <li className="nav-item nav-dropdown"> 
       <p className="nav-link nav-dropdown-toggle" onClick={handleClick.bind(this)}>Global</p> 
       <ul className="nav-dropdown-items"> 
       <li> Organization <br/> 
       <select className="form-control"> 
       <option value="">Select </option> 
       {this.state.data.map(function (option,key) { 
        return <option key={key}>{option}</option>; 
       })} 
       </select> 

Answer 1

대시 보드에서 사이드 바로 상태를 전달해야하는 경우 사이드 바를 Dashboard의 렌더링 기능에서 렌더링해야합니다. 여기서 Dashboard의 상태를 사이드 바에 전달할 수 있습니다. 당신이 대시 보드에 의해 수신 사이드 바에 통과 소품 (DATA1)에의 변경을 원하는 경우에

코드

class Dashboard extends Component { 
... 
... 
    render(){ 
    return(
    <Sidebar data={this.state.data1}/> 
    ); 
    } 
} 

을 니펫을, 당신은 국가를 위로 들어 올릴 필요가있다. 즉, 대시 보드에서 사이드 바에 함수 참조를 전달해야합니다. 사이드 바에서 데이터 1을 대시 보드로 다시 전달하려는 경우 항상 사이드 바를 호출해야합니다. 코드 스 니펫.

class Dashboard extends Component { 
    constructor(props){ 
    ... 
    //following is not required if u are using => functions in ES6. 
    this.onData1Changed = this.onData1Changed.bind(this); 
    } 
    ... 
    ... 
    onData1Changed(newData1){ 
    this.setState({data1 : newData1},()=>{ 
     console.log('Data 1 changed by Sidebar'); 
    }) 
    } 

    render(){ 
    return(
    <Sidebar data={this.state.data1} onData1Changed={this.onData1Changed}/> 
    ); 
    } 
} 

class Sidebar extends Component { 
    ... 
    //whenever data1 change needs to be sent to Dashboard 
    //note: data1 is a variable available with the changed data 
    this.props.onData1changed(data1); 
} 

참조 문서 : https://facebook.github.io/react/docs/lifting-state-up.html

Answer 2

당신은 아이 컴퍼넌트에 부모로부터 소품을 전달할 수 있습니다. 이러한 의존성을 갖기 위해 컴포넌트 계층 구조를 재구성하거나 Redux (react-redux)와 같은 상태/이벤트 관리 시스템을 사용하십시오.