javascript - 有没有办法在安装之前从 JSX 获取 Node/Element/HTMLElement？

Question

是否可以在挂载之前从 JSX 获取元素对象？

以下面的代码为例:

import React from 'react';
import ReactDOM from 'react-dom';
...
const container = <div id='something'>My simple div</div>;
const element = container.??? // Get Node/Element/HTMLElement from 'container'.

我知道有一个 ref attribute但这种方法似乎不起作用。此外，与内联的东西相比，我发现它有点麻烦。

let element = null;
const container = <div id='something' ref={(containerElement) => {element = containerElement;}} />;

这可能不起作用，因为组件尚未安装(这是我正在寻找的用例)。

Answer 1

真正的 DOM 元素在渲染虚拟 React 元素时出现，因此您需要先渲染 container 然后使用 ref :

const container = <div ref={_element => element = _element}>My simple div</div>;
let element;

ReactDOM.render(container, document.body);
alert(element);

<script src="//cdn.jsdelivr.net/npm/react@16.2.0/umd/react.production.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/react-dom@16.2.0/umd/react-dom.production.min.js"></script>

或者 DOM 查询:

const container = <div id="something">My simple div</div>;

ReactDOM.render(container, document.body);
const element = document.querySelector('#something');
alert(element);

<script src="//cdn.jsdelivr.net/npm/react@16.2.0/umd/react.production.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/react-dom@16.2.0/umd/react-dom.production.min.js"></script>