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

是否可以在挂载之前从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;}} />;

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

最佳答案

真正的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/[email protected]/umd/react.production.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/umd/react.production.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"></script>

关于javascript - 有没有办法在挂载之前从JSX获取Node/Element/HTMLElement？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49376518/