Redux: 심판은 어떻습니까?

스마트 대 멍청한 구성 요소

그렇다고 생각합니다. Connector 가있는 _smart_ 구성 요소는 _dumb_ 구성 요소를 렌더링하고 필요한 props 를 전달해야합니다.

@cymen 당신은 이것을 위해 ref 콜백을 사용할 수 있습니다 :)

const decorator = (Base) => {
  return class {
    render() {
      return <Base {...this.props} />
    }
  }
}

<strong i="7">@decorator</strong>
class Test {

  render () {
    return <div ref={this.props.refCallback}>my div</div>;
  }

}


class Wrapper {

  componentWillMount() {
    this.nestedRef = null;
  }

  componentDidMount() {
    console.log(React.findDOMNode(this.nestedRef));
  }

  setNestedRef = (ref) => {
    this.nestedRef = ref;
  }

  render() {
    return <Test refCallback={this.setNestedRef} />
  }
}

위의 내용은 div를 기록합니다. 도움이 될까요?

이것은 데코레이터를 사용하지만 Connector 내부에 중첩 된 구성 요소에 콜백을 전달하면 아마도 잘 작동 할 것입니다. 콜백 내에서 구성 요소에 참조를 다시 할당 할 수 있습니다.

중첩 된 참조가 정말로 필요합니까?

DOM 노드에 액세스하려는 경우 외부 구성 요소에서 findDOMNode 를 수행하면 제대로 작동합니다. (동일한 노드를 가리 킵니다.)

메서드를 호출하려면 대신 props 를 선언적 인터페이스로 사용하는 것이 좋습니다. 이에 대한 논의는 https://github.com/jsstyles/react-jss/issues/15 를 참조하십시오.

마지막으로, _certain_이라면 ref가 필요합니다. 예, https://github.com/gaearon/redux/issues/183#issuecomment -115988937에 제안 된 @johanneslumpe 와 같은 중첩 된 참조를 얻을 수 있습니다.

닫습니다. 명확하지 않은 점이 있으면 알려주세요.

미안하지만 그런 사소한 경우에 'findDOMNode'를 사용하도록 장려하는 것이 어떻게 해결책으로 간주 될 수 있는지 모르겠습니다. 이것은 안티 패턴입니다! 모든 요소에 액세스하고 노드의 계층 구조를 정확히 알아야하는 jquery 시대로 돌아갑니다. 귀하의 문서는 정당하게 읽었습니다.

'findDOMNode ()는 이스케이프 해치입니다 ...이 이스케이프 해치의 사용은 구성 요소 추상화를 뚫기 때문에 권장되지 않습니다.'

미안하지만 그런 사소한 경우에 'findDOMNode'를 사용하도록 장려하는 것이 어떻게 해결책으로 간주 될 수 있는지 모르겠습니다. 이것은 안티 패턴입니다! 모든 요소에 액세스하고 노드의 계층 구조를 정확히 알아야하는 jquery 시대로 돌아갑니다.

무슨 말인지 잘 모르겠습니다. 렌더링 된 노드에 대한 참조가 필요한 경우 (예 : 오프셋 및 크기 계산) findDOMNode(this) 사용할 수 있습니다. 나는 당신에게 "더 깊이 들어가거나"그것을 변형하라고 제안하는 것이 아닙니다.

이것이 만족스럽지 않다면 위에서 제안한 것처럼 ref callback props를 사용하십시오.

React-Native에는 적용되지 않기 때문에 findDOMNode(this) 에 의존해서는 안된다고 생각합니다.

@xvalentino findDOMNode는 필요하지 않습니다. API 문서 에서 getWrappedInstance 관련 비트를 참조하십시오.