Я пытаюсь передать элемент React JSX функции, чтобы этот элемент можно было отобразить как часть компонента React, как в следующем примере:
import React from 'react'
import { render } from 'react-dom'
import { action, observable } from 'mobx'
import { observer } from 'mobx-react'
export class OverlayStore {
@observable activePopup = null
@action
setPopup(element) {
this.activePopup = element
}
}
@observer
export class App extends React.Component {
render() {
return <div>{overlayStore.activePopup}</div>
}
}
const overlayStore = new OverlayStore()
render(<App />, document.getElementById('root'))
overlayStore.setPopup(
<p>
Long<br key = "1" />
Text<br key = "2" />
<a href = "/link" key = "3">
Link
</a>
</p>
)
Моя проблема в том, что я получаю ключевую ошибку, если не добавляю значения ключей вручную, как показано в коде.
Зачем это нужно? Это не для каждого цикла или карты, для которых требуются ключи. Собственно, переданный JSX можно считать статическим, поэтому ключи ему не нужны. Можно ли сказать React рассматривать элемент как статический и не искать ключи?





Опубликованный код прикрепляет элементы вне метода render. Это не стандартный React, и я удивлен, что единственная ошибка связана с клавишами.
При ручном внедрении DOM это обходит виртуальную DOM и не будет частью процесса согласования React.
ОБНОВИТЬ
Это неверный ответ. Изменение наблюдаемого объекта mobx запускает повторный рендеринг, поэтому этого не происходит вне жизненного цикла компонента React.
Хорошо, но вы изменяете элементы вне метода рендеринга, даже если это действительный JSX, это противоречит парадигмам React.
Нет, я не модифицирую их снаружи.
Плохо, я только что снова посмотрел на это, и наблюдаемый mobx обновлен, что вызывает повторный рендеринг компонента App. Я поигрался с песочницей, и мне кажется, что при настройке всплывающего окна, поскольку у div есть два дочерних элемента (p и textarea), ему требуется ключ. Полагаю, что мне показалось странным в этом коде, так это то, что он сохраняет JSX как состояние (в данном случае состояние mobx). Обычно лучший подход - хранить данные, и пусть ваш метод рендеринга определяет JSX.
Я не ввожу DOM вручную, я устанавливаю элемент для наблюдаемого MobX.