Почему React.createPortal допускает использование ключей, таких как элементы списка, а другие вещи, такие как <Suspense>, — нет?

Question

Я видел некоторые API в ReactJs, позволяющие использовать ключи , например<React.Fragment>, но в то же время<React.Suspense>не имеет ключей.

Теперь конкретно, почемуReact.createPortalразрешить ключ, например, элементы списка?

Мое исследование: я не нашел многого в SO или Google, но нашел одно обсуждение на github , которое, похоже, подразумевает, что ключи были добавлены в документацию после 18 апреля 2023 года.

Answer 1

Действительно, я сам считаю, что текущая документация React в некоторых областях немного скудна .

Я также не могу найти там явного утверждения относительно свойства в элементах JSX(не могу доказать отсутствие чего-либо, так что простите меня, если я это пропустил, и не стесняйтесь комментировать).

Реагировать.createElement()

ОБНОВЛЕНИЕ 19 июля 2023 г.:

Этот раздел оcreateElement()вероятно, устарело.
Синтаксис JSX, по-видимому, больше не преобразуется (React v18), а вместо этого преобразуется в вызов внутреннегоjsx()функция, которая, похоже, не должна вызываться разработчиком, я считаю, что она определена в /src/jsx/ReactJSXElement.js:

Предыдущий ответ:

В любом случае, зная, что JSX конвертируется вReact.createElement(...)вызовы (которые, к моему удивлению, упомянуты в разделе «Legacy React API» ) , я вижу, что переданный метод будет обрабатыватьprops.keyимущество особым образом:

Обратите внимание, чтоrefи от твоегоpropsобъект является особенным и не будет доступен какelement.props.refиelement.props.keyна возвращенииelement. Они будут доступны какelement.refиelement.key.

Также обратите внимание на устаревшую документацию :

Код, написанный с использованием JSX, будет преобразован для использованияReact.createElement().

Вычет

Это общее утверждение о , поэтому каждый элемент, созданный с помощью , должен разрешать это свойство .

Предполагая, что по-прежнему верно, что каждый элемент JSX являетсяcreateElementcall, как это было раньше (слово «legacy» предполагает, что оно может измениться) , это означает, что каждый элемент JSX принимает свойство.

Поэтому мне кажется «ясным», что каждый элемент JSX принимает , но, на мой взгляд, это следует указать более явно.

<Реагировать.Фрагмент>

Я предполагаю, что в документации упоминается в <React.Fragment>явно, потому что это общий вопрос, как добавить к фрагменту, потому что фрагмент чаще записывается с использованием синтаксиса пустых скобок<>, где вы не можете добавлять какие-либо свойства. Но это всего лишь предположение.

Реагировать.createPortal()

React.createPortal() отличается тем, что это не синтаксис JSX, поэтому для него требуется специальная документация.

Списки рендеринга

В разделе «Списки рендеринга» упоминаются свойства, но я считаю, что этого недостаточно, чтобы ответить на ваш вопрос.

Он ориентирован исключительно на ключи в «элементах списка»/«коллекциях»/«массивах» и ничего не говорит оkeyсобственность в целом.