React: autoFocus는 React 16의 SSR에서 작동하지 않습니다.

자동 초점을 속성으로 내 보내야한다고 생각합니다.

주요 단점은 autofocus 가 IE9, iOS Safari 및 Android 브라우저에서 지원되지 않는다는 것 입니다. 내가 놓친 다른 단점이 있습니까? JS를 통해 자동 초점을 추가하는 것이 얼마나 어렵거나 기계적인가?

우리가 항상 JS로한다면, 꽤 쉽지만 의미론에는 꽤 나빠 보입니다. 실제로 초점을 맞추기 전에 모든 스크립트가로드되는 데 시간이 걸릴 수 있습니다. 사용자는 그 동안 다른 것에 집중할 수 있으며 갑자기 집중됩니다. Fiber를 사용하면 비동기 적으로 재수화할 수 있고 부분 수화를 원할 수도 있기 때문에 이미있는 것보다 더 나빠질 수 있습니다.

둘 다 할 수 있지만 초점을 맞출 수있는 이상한 인공물이 있습니다. 스위치를 끄고 다시 초점을 맞 춥니 다.

정상적인 것이 실패한 경우에만 JS에서 수행 할 수 있지만이를 감지하는 방법을 모르고 많은 코드를 추가 할 수 있습니다.

브라우저 지원 문제를 감안할 때 올바른 절충이 무엇인지 잘 모르겠습니다.

실제로 초점을 맞추기 전에 모든 스크립트가로드되는 데 시간이 걸릴 수 있습니다.

나는 이것이 속성을 방출하는 매우 강력한 사례라고 생각합니다. document.activeElement 확인하더라도 사용자가 이미 흐름에 있거나 페이지를 아래로 스크롤했을 수 있습니다. 페이지가 점프하거나 키 입력 중간에 다른 입력 상자에 입력을 시작하는 것을 원하지 않습니다.

그 중 일부가 재해시라면 미안하지만 누군가가 그것에 대해 문제를 제기하면 내가 주장 할 논쟁이 될 것입니다.

속성을 방출하는 것은 올바른 방법처럼 들립니다. 자동 초점을 지원하지 않는 브라우저에서 작동하도록하려면 본문 끝에 스크립트를 추가하는 것이 가장 정상인 것 같습니다.

    <script>!function(el){el&&el.focus()}(document.querySelector('[autofocus]'))</script>

HTML 페이지가 매우 큰 경우에만 문제가 발생한다고 생각합니다. 나는 또한 activeElement를 검사 할 수 있다고 생각합니다 (없거나 body이면 focus)하지만 과도 할 수 있습니다.

cc https://github.com/facebook/react/issues/3066

autofocus-attribute를 표시하지 않는 초기 이유는 브라우저 구현이 처리 방식에서 광범위하게 일관성이 없었기 때문입니다 (일부는 지원하지 않고 일부는 페이지로드에만 초점을 맞추는 등). IMHO는 자동 초점에 대해 진지한 사람이라면 어쨌든 JS를 통해 수동으로 적용해야 함을 의미합니다. 그러나 이제는 JS 포커스를 실제로 듣지 않지만 어느 정도 자동 포커스를 존중하는 모바일 브라우저가 있다는 것을 막연하게 기억합니다.

엉망이지만 속성을 내보내는 것에는 약간의 장점이 있으며, 그것에 대해 강하게 느끼면 수동으로 집중합니다. 모든 도구가 제공됩니다.

나는 이것 에 대해 나누었고 이것이 그럴듯한 방법으로 들린다 고 생각합니다.

반응 16

• SSR HTML로 내 보냅니다.
• 수화 된 요소에 대해 JS 폴리 필을 호출하지 않도록합니다.
• 클라이언트가 만든 요소에 대해 계속 블랙리스트하고 JS polyfill을 사용하십시오.

반응 17

• JS polyfill을 완전히 제거하십시오.
• 커밋 중에 autoFocus 요소가 두 개 이상 추가되면 경고합니다 (브라우저 불일치가 발생하는 곳이기 때문에).

이게 말이 돼?

커밋 중에 하나 이상의 autoFocus 요소가 추가 된 경우 경고합니다 (브라우저 불일치가 발생하는 위치이므로).

적어도 얼마 전까지 만해도 브라우저는 autoFocus 속성을 해석하는 방식에서도 일관성이 없습니다. 나는 예를 들어 FF가 페이지로드시에만 그것을 존중하고 동적으로 삽입 된 것을 완전히 무시한다는 것을 알고 있습니다. 그러나 나는 그것을 오랫동안 조사하지 않았습니다.

그래도 접근 방식이 옳다고 생각합니다.

기본적인 조사 결과 Safari를 제외한 대부분의 최신 브라우저는 페이지로드 후 autoFocus 전혀 존중하지 않는 것처럼 보입니다.

HTML 문서에는 이치에 맞았을 것입니다.하지만 앱에서는 동적으로 삽입 된 요소에 대해 autoFocus 이 기본적으로 SPA의 첫 페이지로드만큼 "페이지 전환"이기 때문에 존중 될 것으로 예상합니다.

그래서 우리는 아마도 polyfill을 유지해야 할 것입니다.

더 이상해집니다.

Chrome은 이전에 요소가 없었던 경우 autoFocus 동적으로 추가 된 요소를 존중합니다. autoFocus 로 입력을 생성하고 문서에 추가하고 다음 틱에서 제거하는 것만으로도 향후 Chrome에서 추가되는 요소의 자동 초점을 비활성화 할 수 있습니다.

Firefox는 autoFocus 로 동적으로 추가 된 요소에 대해 전혀 신경 쓰지 않습니다.

그리고 Safari는 항상 그들을 존중합니다.

https://github.com/facebook/react/pull/11192 에서 수정되었습니다