将JSX元素传递给函数需要手动键？

Question

我正在尝试将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将元素视为静态而不寻找密钥？

Answer 1

发布的代码附加了render方法之外的项目。这不是标准的React，我很惊讶唯一的错误是关键。

通过手动注入DOM，这会绕过虚拟DOM，并且不会成为React协调过程的一部分。

<强>更新

这个答案是不正确的。对mobx observable的更改会触发重新呈现，因此这不会发生在React组件生命周期之外。