Передача элементов JSX в функцию требует наличия ручных клавиш?

Я пытаюсь передать элемент 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 в функцию требует наличия ручных клавиш?

Моя проблема в том, что я получаю ключевую ошибку, если не добавляю значения ключей вручную, как показано в коде.

Зачем это нужно? Это не для каждого цикла или карты, для которых требуются ключи. Собственно, переданный JSX можно считать статическим, поэтому ключи ему не нужны. Можно ли сказать React рассматривать элемент как статический и не искать ключи?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
119
1

Ответы 1

Опубликованный код прикрепляет элементы вне метода render. Это не стандартный React, и я удивлен, что единственная ошибка связана с клавишами.

При ручном внедрении DOM это обходит виртуальную DOM и не будет частью процесса согласования React.

ОБНОВИТЬ

Это неверный ответ. Изменение наблюдаемого объекта mobx запускает повторный рендеринг, поэтому этого не происходит вне жизненного цикла компонента React.

Я не ввожу DOM вручную, я устанавливаю элемент для наблюдаемого MobX.

hyperknot 19.03.2018 21:35

Хорошо, но вы изменяете элементы вне метода рендеринга, даже если это действительный JSX, это противоречит парадигмам React.

brentatkins 19.03.2018 21:38

Нет, я не модифицирую их снаружи.

hyperknot 20.03.2018 01:04

Плохо, я только что снова посмотрел на это, и наблюдаемый mobx обновлен, что вызывает повторный рендеринг компонента App. Я поигрался с песочницей, и мне кажется, что при настройке всплывающего окна, поскольку у div есть два дочерних элемента (p и textarea), ему требуется ключ. Полагаю, что мне показалось странным в этом коде, так это то, что он сохраняет JSX как состояние (в данном случае состояние mobx). Обычно лучший подход - хранить данные, и пусть ваш метод рендеринга определяет JSX.

brentatkins 20.03.2018 07:08

Другие вопросы по теме