React에서 상위 컴포넌트 인스턴스에 액세스할 수 있는 방법이 있습니까?

React에서 상위 컴포넌트 인스턴스에 액세스할 수 있는 방법이 있습니까?

기능적인 접근법이 아니라는 것을 알고 있습니다.this.parentReact 컴포넌트 인스턴스에서 상위 컴포넌트로 연결되는 속성을 찾을 수 없지만 필요한 경우 커스텀 작업을 수행할 수 있는지 알아보고 있습니다.

React가 기능적인 "방법"이 아니라고 설명하는 데 시간을 낭비하기 전에, 제가 달성하고자 하는 다음과 같은 이유로 이것이 필요하다는 것을 이해하십시오.

렌더링 모델이 상위 구성요소/템플릿을 고려하는 Meteor의 Spacebar 템플릿 엔진용 트랜스필러를 만듭니다.

이를 위해 출력 jsx를 수정하는 트랜스필러를 이미 만들었습니다.나는 이것을 통과함으로써 한다.parent={this}구성되는 모든 하위 구성 요소에서.다만, 그 후, 추가 전위 변경 없이 상위 컴포넌트 인스턴스에 액세스 할 수 있는 방법을 모르는 것일지도 모른다는 생각이 들었습니다.

어떤 팁이라도 주시면 감사하겠습니다.

자녀로부터 부모의 소품이나 기능에 액세스 할 필요가 있어도 문제 없습니다.

요점은 리액트 내부 API와 문서화되어 있지 않은 API를 사용하면 안 된다는 것입니다.

우선, 이러한 접근법이 변경(코드 위반)될 가능성이 높으며, 무엇보다도 더 깔끔한 접근법이 많이 있습니다.

어린이에게 소품 전달

class Parent extends React.Component {

    constructor(props) {
        super(props)

        this.fn = this.fn.bind(this)
    }

    fn() {
        console.log('parent')
    }

    render() {
        return <Child fn={this.fn} />
    }

}

const Child = ({ fn }) => <button onClick={fn}>Click me!</button>

작업 예

콘텍스트 사용(직접 부모/자녀 관계가 없는 경우)

class Parent extends React.Component {

    constructor(props) {
        super(props)

        this.fn = this.fn.bind(this)
    }

    getChildContext() {
        return {
            fn: this.fn,
        }
    }

    fn() {
        console.log('parent')
    }

    render() {
        return <Child fn={this.fn} />
    }

}

Parent.childContextTypes = {
    fn: React.PropTypes.func,
}

const Child = (props, { fn }) => <button onClick={fn}>Click me!</button>

Child.contextTypes = {
    fn: React.PropTypes.func,
}

작업 예

React 0.13 이상용 업데이트

Component._ownerReact 0.13에서는 권장되지 않습니다._currentElement열쇠로서 존재하지 않게 되다this._reactInternalInstance따라서 아래 솔루션을 사용하여 던집니다.Uncaught TypeError: Cannot read property '_owner' of undefined.

대안은 React 16에서this._reactInternalFiber._debugOwner.stateNode.

---

이 방법은 거의 항상 좋은 방법은 아니라는 것을 이미 알고 계시겠지만, 질문을 잘 읽지 못하는 분들을 위해 다시 한 번 말씀드리지만, 이것은 일반적으로 React에서 작업을 수행하는 부적절한 방법입니다.

퍼블릭 API에는 원하는 것을 얻을 수 있는 것이 없습니다.React internals를 사용하여 이 정보를 얻을 수 있지만 개인 API이기 때문에 언제든지 문제가 발생할 수 있습니다.

반복한다: 이 코드를 어떤 종류의 프로덕션 코드에도 사용하면 안 됩니다.

는 ,, 음, 음, 음, 다, 다, 다, 다를 사용하여 얻을 수 있습니다.this. _reactInternalInstance이, 을 수 . , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ._currentElement소유자의 인스턴스(instance)를 클릭합니다._owner._instance.

다음은 예를 제시하겠습니다.

var Parent = React.createClass({
  render() {
      return <Child v="test" />;
  },

  doAThing() {
    console.log("I'm the parent, doing a thing.", this.props.testing);
  }
});

var Child = React.createClass({
  render() {
    return <button onClick={this.onClick}>{this.props.v}</button>
  },

  onClick() {
    var parent = this._reactInternalInstance._currentElement._owner._instance;
    console.log("parent:", parent);
    parent.doAThing();
  }
});

ReactDOM.render(<Parent testing={true} />, container);

JSFiddle의 예를 들어보겠습니다.http://jsfiddle.net/BinaryMuse/j8uaq85e/

React 16에서 테스트 완료

저는 비슷한 콘텍스트를 사용하여 장난치고 있었습니다.이 글을 읽는 사람은 거의 없습니다.대부분의 경우 부모에게 접근하지 않는 것이 좋습니다.

사용할 때 항상 표시 목록의 첫 번째 홀더를 참조할 수 있는 홀더를 만들었습니다. 그러니 괜찮으시다면 '부모'입니다.이렇게 생겼죠.

const ParentContext = React.createContext(null);

// function to apply to your react component class
export default function createParentTracker(componentClass){

    class Holder extends React.PureComponent {

        refToInstance

        render(){
            return(
                <ParentContext.Consumer>
                {parent => {
                    console.log('I am:', this, ' my parent is:',parent ? parent.name : 'null');
                    return(
                        <ParentContext.Provider value={this}>
                            <componentClass ref={inst=>refToInstance=inst} parent={parent} {...this.props} />
                        </ParentContext.Provider>
                    )}
                }
                </ ParentContext.Consumer>
            )
        }
    }

    // return wrapped component to be exported in place of yours
    return Holder;
}

그런 다음 다음과 같이 내보내면 반응 구성요소를 메서드에 전달합니다.

class MyComponent extends React.Component {

    _doSomethingWithParent(){
        console.log(this.props.parent);  // holder
        console.log(this.props.parent.refToInstance);  // component
    }
}

// export wrapped component instead of your own
export default createParentTracker(MyComponent);

이 방법으로 함수를 내보내는 컴포넌트는 부모 홀더를 지주(또는 계층 위에 아무것도 없는 경우에는 null)로 전달합니다.여기서 refToInstance를 가져올 수 있습니다.그러나 모든 것이 마운트될 때까지 정의되지 않습니다.

언급URL : https://stackoverflow.com/questions/34257665/is-there-any-way-to-access-the-parent-component-instance-in-react