React: 포털 및 SSR로 수분 공급시 예상치 못한 경고

에 만든 2018년 04월 15일 · 24코멘트 · 출처: facebook/react

기능 을 요청하거나 버그를보고 하시겠습니까?

곤충

현재 행동은 무엇입니까?

다음 (간체) 스 니펫이 제공됩니다.

class HoverMenu extends React.Component {
  render() {
    if (typeof document === 'undefined') return null
    const root = document.getElementById('root')
    return ReactDOM.createPortal(<div>Hello World</div>, root)
  }
}

class Para extends React.Component {
  render() {
    return (
      <span>
        Some Text
        <HoverMenu />
      </span>
    )
  }
}

div#root 는 존재하는 유효한 div 경우 SSR 후 수화시 다음 오류가 표시됩니다.

Warning: Expected server HTML to contain a matching <div> in <span>

HoverMenu 의 정의를 다음과 같이 업데이트하면 경고가 사라집니다.

class HoverMenu extends React.Component {
  componentDidMount() {
    this.setState({ isActive: true })
  }
  render() {
    const { isActive} = this.state
    if (!isActive) return null
    const root = document.getElementById('root')
    return ReactDOM.createPortal(<div>Hello World</div>, root)
  }
}

setState 에서 componentDidMount setState 로 인한 이중 렌더링 때문에 그렇게하지 않는 것이 좋습니다.

나는 그 오류가 나에게 말하는 것을 잘 이해하지 못합니다. 어떤 경우에도 <div /> 는 서버 측에서 렌더링되지 않습니다. HoverMenu DOM div 는 DOM span 내부에서 렌더링되지 않기 때문에이 오류는 특히 혼란 스럽습니다. ( HoverMenu 이 React span 안에 중첩되어 있기 때문에 이런 일이 발생하는지 궁금합니다.)

예상되는 동작은 무엇입니까?

오류가 발생하지 않습니다. 또는 적어도 오류 메시지가 더 명확합니다.

어떤 버전의 React와 어떤 브라우저 / OS가이 문제의 영향을 받습니까?

크롬 65
반응 16.2
(SSR부터 Next 5.1까지)

medium Bug good first issue

출처

majelbstoat

👍11

가장 유용한 댓글

수분 공급 포털은 지원되지 않지만 (https://github.com/facebook/react/issues/13097) 메시지 자체는 의미가 없습니다. 조사하고 수정해야합니다.

gaearon 에 2018년 08월 02일

👍8

모든 24 댓글

setState를 통해 클라이언트에서 다시 렌더링하여 해결할 수도있는 비슷한 문제가 있습니다.
제 경우에는 포털 내부에서 모달을 렌더링하려고합니다. Modal 구성 요소는 서버에서 렌더링 될 때 null 반환하고 클라이언트에 포털을 만듭니다. 그러나 DOM은 수화 후 엉망이됩니다.

예를 들어 주 구성 요소 내에서 다음과 같이 사용하면 다음과 같습니다.

<Modal>
This is a test
</Modal>

<div className="some-div-after-the-modal">
</div>

수화 후 이것을 얻는 대신 :

<!-- Inside the portal container -->
<div class="modal-wrapper">
    <div class="modal-content">This is a test</div>
</div>

<!-- In the main component -->
<div class="some-div-after-the-modal">
</div>

나는 이것을 얻는다 :

<!-- Inside the portal container -->
<div class="some-div-after-the-modal">
    <div class="modal-content">This is a test</div>
</div>

<!-- In the main component -->
<div class="some-div-after-the-modal">
</div>

그리고 경고는 동일합니다 ( Expected server HTML to contain a matching <div> in <div> ). 커스텀 SSR 방법과 함께 React 16.3을 사용합니다.

이것이 의도 된 동작인지 확실하지 않습니다.

interphx 에 2018년 04월 16일

수분 공급 포털은 지원되지 않지만 (https://github.com/facebook/react/issues/13097) 메시지 자체는 의미가 없습니다. 조사하고 수정해야합니다.

gaearon 에 2018년 08월 02일

👍8

@gaearon 수정의 목적은

[] hydrate ()에서 Portal이 사용되고 있음을 감지 한 후 불변으로 더 적절한 오류 메시지를 표시합니다.
예 : invariant violation: Portal is not support on SSR. For more detail, please refer https://github.com/facebook/react/issues/13097
[] 테스트 추가
- [] Portal이 hydrate ()와 함께 사용되는 경우 위의 오류 메시지가 표시되어야합니다.

권리?
급하지 않다면 기꺼이합니다.

SSR Doc 초안을 웹 사이트 저장소로 계획하고 있으므로 수화 메커니즘에 익숙해야합니다.
이 조사가 제 계획에 도움이 될 것 같습니다.
https://github.com/facebook/react/pull/13379

ryota-murakami 에 2018년 08월 30일

SSR에서 포털이 "아무것도"렌더링되지 않는 이유는 무엇입니까?

ljharb 에 2018년 08월 30일

아무것도 렌더링하는 것이 최선 인 것 같지 않습니다. 포털 콘텐츠를 다르게 만드는 것이 서버 렌더링의 가치가 없다고 생각하지 않습니다.

우리는 서스펜스를 위해 서버 렌더러의 개편과 함께 이것으로 돌아올 것입니다.

gaearon 에 2018년 08월 30일

👍5

포털은 개념적으로 클라이언트 전용 구성 요소입니다. 일반적으로 서버에서 렌더링 하고 싶지 않은 모달과 같은 것에 사용됩니다. 또한 dom 요소를 사용합니다. 이는 dom이 없기 때문에 renderToString이 사용하지 않습니다. 나는 서버에서 그들과 함께 할 수있는 의미있는 것이 무엇인지 알지 못합니다. 또한 던지는 것에서 가치있는 것이 보이지 않습니다.

ljharb 에 2018년 08월 30일

모달과 같은 것들에 사용

그것은 하나의 사용 사례이지만 반드시 클라이언트 전용이 아닌 사이드 바 및 이와 유사한 다른 사례도 있습니다.

그들은 또한 dom 요소를 취합니다.

오른쪽 — 현재 디자인에서. 변경 될 수 있습니다. https://github.com/facebook/react/pull/8386#issuecomment -262375265

나는 또한 던지는 것에서 가치있는 것을 보지 못합니다.

던지기의 가치는 포털이 작동하지 않는다는 것을 명시 적으로 인정하는 것입니다. {domNode && ReactDOM.createPortal(stuff, domNode)} 또는 이와 유사한 것으로 쉽게 해결할 수 있습니다. DOM 노드를 가져올 수 있는지 여부를 확인하기 위해 이미 어떤 종류의 검사를 수행해야했기 때문에이 시점에서 포털을 내 보내지 않도록 선택할 수있는 충분한 데이터가 있어야합니다.

gaearon 에 2018년 08월 30일

👍5

이 문제를 "좋은 첫 번째 문제"로 수정하고 싶습니다.