심판에게 소품을 건네는 적절한 방법은 무엇입니까?

심판에게 소품을 건네는 적절한 방법은 무엇입니까?

구성 요소의 참조를 다른 구성 요소에 전달하려고 합니다.문자열 참조가 권장되지 않기 때문에 콜백 참조를 사용하고 있습니다.

이것과 비슷한 것이 있습니다.

<One ref={c => this.one = c}/>
<Two one={this.one}/>

문제는 제가 이 컴퓨터에 접속하려고 할 때마다this.props.one안에서.Two나는 이해한다undefined.

이거 입어보기도 했어요.Two:

componentDidMount(){
    setTimeout(()=>{
        console.log(this.props.one);
    },5000)
}

문제는 소품 작성 시 참조가 한 번 작성되기 때문에 아직 존재하지 않는 것 같습니다.One탑재되어 있습니다.하지만 어떻게 소품들을 새로 고쳐야 할지 모르겠어요Two장착 구성 요소에 참조를 전달합니다.

그럼 다른 컴포넌트에 레퍼런스를 전달하는 적절한 방법은 무엇일까요?

편집

일부 사용자는 이 로직을 상위 컴포넌트에 캡슐화할 것을 제안하고 있습니다.이러한 컴포넌트는 그 자체로 다른 하위 컴포넌트를 렌더링합니다.

이 접근법의 문제는 재사용 가능한 논리를 생성할 수 없고 캡슐화된 컴포넌트에서 동일한 논리를 반복해야 한다는 것입니다.

예를 들어, 범용을 작성한다고 가정해 봅시다.<Form>저장소로 전송 로직을 캡슐화하는 컴포넌트, 오류 검사 등그리고 이런 걸 하죠.

<Form>
    <Input/>
    <Input/>
    <Input/>
    <Input/>
    <SubmitButton/> 
</Form>

이 예에서는<Form>이후 아이들의 인스턴스(및 메서드)에 액세스할 수 없습니다.this.props.children이러한 인스턴스는 반환되지 않습니다.유사 컴포넌트 목록을 반환합니다.

그럼 어떻게 확인할 수 있죠?<Input/>참조를 전달하지 않고 검증 오류를 검출했는가?

이러한 컴포넌트는 검증 로직을 사용하여 다른 컴포넌트에 캡슐화해야 합니다.예를 들어,<UserForm>그러나 각 형식이 다르기 때문에 동일한 논리를 복사해야 합니다.<CategoryForm>,<GoupForm>, 등. 이것은 매우 비효율적입니다.그래서 검증 로직을 캡슐화하려고 합니다.<Form>의 레퍼런스를 전달합니다.<Input>컴포넌트<Form>.

일반적으로 ref 기능은 React의 안티 패턴입니다.부작용 중심의 개발을 가능하게 하기 위해 존재하지만, 리액트 방식의 프로그래밍을 최대한 활용하기 위해서는 가능하면 "참조"를 피해야 합니다.

당신의 특별한 문제에 대해 말하자면, 아이의 형제에게 레퍼런스를 건네는 것은 닭 대 계란 시나리오입니다.참조 콜백은 렌더링 중이 아니라 하위 마운트 시 실행되므로 예가 작동하지 않습니다.당신이 시도할 수 있는 한 가지 방법은 심판을 상태로 밀어 넣은 다음 주로부터 다른 아이에게 읽어주는 것이다.그래서:

<One ref={c => !this.state.one && this.setState({ one: c })}/>
<Two one={this.state.one}/>

" " " : " "!this.state.one무한 루프가 발생합니다.

다음은 이 작업의 코드 페이지 예시입니다(콘솔에서 형제 참조 로그가 표시됩니다).http://codepen.io/anon/pen/pbqvRA

이것은 이제 새로운 ref api(React 16 이후 이용 가능 - 그것을 지적해 준 prailandmissap 덕분에 가능)를 사용하여 훨씬 더 간단해졌다.

class MyComponent extends React.Component {
  constructor (props) {
    super(props);
    this.oneRef = React.createRef();
  }

  render () {
    return (
      <React.Fragment>
        <One ref={this.oneRef} />
        <Two one={this.oneRef} />
      </React.Fragment>
    }
  }
}

Two들면 다음과 같습니다.

this.props.one.current

이 접근법에 관한 주의사항:

는 ref를 .current★★★★★★★★★★★★★★★★★★★★★★★★.null 구성 요소/구성 요소가 마운트될 때까지.마운트되면 이 인스턴스가 됩니다.One. 한 번 참조하는 것이 안전합니다.<Two />탑재되어 있습니다.

''가<One />해제되어 .current이 ref로 null.

일반적으로 호출 시 설정되지 않은 항목에 대한 참조를 전달할 필요가 있는 경우 대신 람다를 전달할 수 있습니다.

<One ref={c => this.one = c}/>
<Two one={() => this.one}/>

라고 언급합니다.

this.props.one()

호출 시 설정이 되어 있으면 값이 표시됩니다. 전에 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」undefined(서양속담, 노력속담)

하게 되었을 때 할 에, 저는 「재렌더」가 될 것이라고 생각합니다.undefined재렌더는 두 개 수 .이것은 상태를 사용하여 참조를 유지하는 것으로 처리되지만, 두 번 이상 재렌더를 얻을 수 없습니다.

하고 있는 이든, 「 」 「 」 「 」 「 」로 이동하는 것을 합니다.OneTwo를 One ★★★★★★★★★★★★★★★★★」Two이 전략과 @Carl Svere의 답변에 있는 모든 문제를 회피하기 위해서입니다.

언급URL : https://stackoverflow.com/questions/38864033/whats-the-proper-way-of-passing-a-ref-to-a-prop