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

渲染虚拟React元素时会显示真实的DOM元素，因此您需要先渲染container然后再使用ref：

＆＃13;

const container = <div ref={_element => element = _element}>My simple div</div>;
let element;

ReactDOM.render(container, document.body);
alert(element);

＆＃13;

<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>

＆＃13;

或DOM查询：

＆＃13;

const container = <div id="something">My simple div</div>;

ReactDOM.render(container, document.body);
const element = document.querySelector('#something');
alert(element);

＆＃13;

<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>

＆＃13;

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

1 个答案: