참조를 통해 하위 구성 요소 기능에 액세스하는 방법

참조를 통해 하위 구성 요소 기능에 액세스하는 방법

Reaction에 대한 문서는 요소 기능이 참조를 통해 상위 구성요소에 의해 액세스될 수 있다는 것을 명시한다.https://facebook.github.io/react/tips/expose-component-functions.html을 참조하십시오.

나는 이것을 내 어플리케이션에서 사용하려고 하지만 하위 기능이 호출될 때 "정의되지 않은 것은 함수가 아니다" 오류에 부딪친다.내 코드와 문서의 다른 차이점이 보이지 않기 때문에 이것이 리액션 클래스에 ES6 형식을 사용하는 것과 관련이 있는지 궁금하다.

나는 다음과 같은 유사점처럼 보이는 Dialog 컴포넌트를 가지고 있다.대화상자에는 저장()을 호출하는 "저장" 버튼이 있으며, 이 버튼은 하위 내용 구성요소의 저장() 함수를 호출해야 한다.내용 구성요소는 하위 양식 필드에서 정보를 수집하고 저장을 수행한다.

class MyDialog extends React.Component {
  save() {
    this.refs.content.save();                    <-- save() is undefined
  }

  render() {
    return (
      <Dialog action={this.save.bind(this)}>
        <Content ref="content"/>
      </Dialog>);
   }
}

class Content extends React.Component {
  save() {
    // Get values from child fields
    // and save the content
  }
}

대신, 소품(saveOnNextUpdate 저장)을 컨텐츠에 전달하고 그것이 사실일 때마다 저장을 실행할 수 있지만, 위의 대응 문서에 자세히 설명되어 있는 메서드를 어떻게 작동시킬 수 있는지 알아내고 싶다.

문서 접근 방식을 통해 작업을 수행하거나 하위 구성요소 기능에 다른 방식으로 액세스하는 방법에 대한 의견이 있으십니까?

Reducx connect는 옵션 파라메터를 네 번째 파라미터로 받아들인다.이 옵션 매개 변수에서 Ref를 사용하여 플래그를 true로 설정할 수 있다.그런 다음 getWapped를 사용하여 참조할 기능에 액세스할 수 있다.인스턴스()다음과 같은 경우:

class MyDialog extends React.Component {
  save() {
    this.refs.content.getWrappedInstance().save();
  }

  render() {
    return (
      <Dialog action={this.save.bind(this)}>
        <Content ref="content"/>
      </Dialog>);
   }
}

class Content extends React.Component {
  save() { ... }
}

function mapStateToProps(state) { ... }

module.exports = connect(mapStateToProps, null, null, { withRef: true })(Content);

자세한 내용은 https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options를 참조하십시오.

참고 자료 사용에 대한 이 기사를 읽고 더 나은 접근법이 있는지 고려해 보십시오. https://facebook.github.io/react/docs/refs-and-the-dom.html#dont-overuse-refs

이를 위한 다른 방법으로는 (다른 방법으로는) 몇 가지 다른 프로펠러 이름을 사용하는 것이 있을 것이다.ref). 이런 도서관을 이용하는 경우에도 이 방법이 잘 통한다는 것을 알게 되었다.styled-components또는emotion예를 들어 연결된 경우MyComponent:

<MyComponent
  ...
  innerRef={(node) => { this.myRef = node; }}
/>

알고 보니, m90이 맞았어. 이건 완전히 다른 문제였어.앞으로 같은 문제에 부딪힐 경우를 대비해서 해결책을 게시하는 겁니다.

내 어플리케이션은 Redex로 만들어졌고, 문제는 reaction-remensx connect 기능을 사용하여 구성 요소를 store/global state에 연결하는 것에서 비롯된다.어떤 이유에서인지 구성품을 수출하고 저장소에 연결하면 그 안에 있는 기능에 접근할 수 없게 된다.이를 극복하기 위해서는 콘텐츠에서 글로벌 상태의 모든 사용을 없애야 했기에 '덤' 구성요소로 수출할 수 있었다.

좀 더 분명히 하자면 콘텐트.js는 다음과 같이 보였다.

var connect = require('react-redux').connect;

class Content extends React.Component {
  save() {
    // Get values from child fields
    // and save the content

    // Use of this.props.stateObject
  }
}

function mapStateToProps(state) {
  const {
    stateObject
  } = state;

  return {
    stateObject
  };
}

module.exports = connect(mapStateToProps)(Content);

글로벌 상태 사용(따라서 connect 및 mapStateToPropes 사용)을 제거하여 다음을 사용하여 구성 요소를 내보낼 수 있었다.

module.exports = Content;

이 .refs.content.save()에 접속하는 것은 이것을 한 후에 마술처럼 작동했다.

참조URL: https://stackoverflow.com/questions/34004331/how-to-access-child-component-functions-via-refs