다른 컴포넌트에서 컴포넌트 상태에 액세스하는 방법

다른 컴포넌트에서 컴포넌트 상태에 액세스하는 방법

다른 컴포넌트에서 컴포넌트 상태에 액세스하려면 어떻게 해야 합니까?는 제 이며 컴포넌트 a 내b.

var a = React.createClass({
    getInitialState: function () {
        return {
            first: "1"
        };
    },

    render: function () {
        // Render HTML here.
    }  
});

var b = React.createClass({
    getInitialState: function () {
        return {
            second: a.state.first
        };
    },

    render: function () {
        // Render HTML here.
    }  
});

하지만 난 아무것도 얻지 못했어.

않습니다.state 것이 .a ★★★★★★★★★★★★★★★★★」b . 。ParentComponent 유지하다state이들아

예를 들어.

var ParentComponent = React.createClass({
  getInitialState : function() {
    return {
      first: 1,
    }
  }

  changeFirst: function(newValue) {
    this.setState({
      first: newValue,
    });
  }

  render: function() {
   return (
     <a first={this.state.first} changeFirst={this.changeFirst.bind(this)} />
     <b first={this.state.first} changeFirst={this.changeFirst.bind(this)} />
   )
 }
}

, 이제 당신의 컴포넌트 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」a ★★★★★★★★★★★★★★★★★」b access, first( 「」를 사용)this.props.first의을 변경하고 싶은 firstthis.props.changeFirst()의 function의 ParentComponent에 두 a ★★★★★★★★★★★★★★★★★」b.

는 지금 구성 를 쓰고 있습니다.라는 구성 요소를 쓰고 .a 여서,,b음음음같 뭇매하다

var a = React.createClass({

  render: function() {
    var first = this.props.first; // access first anywhere using this.props.first in child
    // render JSX
  }
}

2개의 컴포넌트가 같은 상태에 액세스 할 필요가 있는 경우는, 상태가 보관 유지되는 공통의 상위 컴포넌트를 가지고 있을 필요가 있습니다.

따라서 컴포넌트 A는 B와 C의 부모입니다.컴포넌트 A는 상태를 가지고 있으며, 그것을 소품으로 B와 C에 전달합니다.B에서 상태를 변경하려면 콜백 함수를 소품으로 전달합니다.

상태를 관리하기 위해 Redux(개인적으로 즐겨찾기), MobX 환류 등의 스테이트 매니저를 사용하는 것이 좋습니다.

이러한 기능을 통해 모든 공유 상태를 하나의 상태 스토리지(스토어라고 함)에 포함할 수 있으며, 공유 상태의 일부에 액세스해야 하는 구성 요소는 스토어에서 가져옵니다.

처음에는 매우 어려워 보였지만, 작은 문제를 극복하고 나면 2, 3개의 "wtf"를 제거하세요.더 쉬워진다.

여기를 봐주세요.http://redux.js.org/

편집: Redux는 좋지만 보일러 플레이트 코드는 정말 꺼짐...보다 심플하고 마법의 솔루션(좋은 솔루션도 나쁜 솔루션도 있습니다)을 원하시면 mobx를 이용하세요.https://mobx.js.org/

상태를 설정하는 하위 구성 요소 생성 함수:

changeTheState(){
    this.setState({something:"some value"})
}

부모 구성 요소에서 다음과 같은 참조를 자녀에게 제공합니다.

<Child ref={component => this._child = component}/>

그런 다음 부모에서 변경에 액세스하기 위한 함수를 만듭니다.The State()

parentFunction(){
    this._child.changeTheState();
}

parentFunction을 사용하면 됩니다.

B가 A의 자녀인 A와 B 컴포넌트가 있으면 소품을 통해 A의 상태를 B로 변경하는 기능을 전달할 수 있습니다.

function B(props) {
    return <button onClick={props.changeA} />
}

class A extends React.Component {

    //constructor
    //pass this function to B to change A's state
    handleA() {
        this.setState({});
    }

    render() {
        return <B changeA={() => this.handleA()} />
    }
}

리액트 컨텍스트 보기

컨텍스트는 모든 레벨에서 수동으로 소품을 전달할 필요 없이 컴포넌트 트리를 통해 데이터를 전달할 수 있는 방법을 제공합니다.

필요한 경우 중첩된 구성 요소에서 컨텍스트를 업데이트할 수도 있습니다.

언급URL : https://stackoverflow.com/questions/36837958/how-to-access-one-components-state-from-another-component