时间戳

首页 > 解决方案 > 如何使用 React.createRef() 渲染重复元素

javascript - 如何使用 React.createRef() 渲染重复元素

问题描述

在我下面的代码中，我想使用React.createRef(). 因为从长远来看，我必须在帮助屏幕的对话框中呈现相同的元素。

那么如何在 DOM 中渲染它呢？

通过下面的代码，我可以获得div元素的引用，但不能在 Dom 中呈现它。

export default class TestComponent extends React.Component {

    state = {};
    myRef;

    constructor(props) {
        super(props);
        this.myRef = React.createRef();
    }

    render() {
        return (
            <React.Fragment>
                <div ref={this.myRef}>
                    <h2>Hello World!!!</h2>
                </div>
                {this.myRef && <>{this.myRef.current}</>}
            </React.Fragment>
        );
    }
}

编辑：

我必须将此引用传递给一个新组件（HelpScreenComponent），它会将相同的元素与一些额外的 UI 一起呈现为对话框。

标签： javascriptreactjs

解决方案

我的问题是在叠加层上呈现重复的组件，以便首次使用的用户向他们显示帮助屏幕。

我没有得到确切的答案，而是通过仅渲染内部 Html 来解决我的问题。

在上面的代码中通过替换行

{this.myRef && <>{this.myRef.current}</>}

有了这个

{this.myRef.current && <div dangerouslySetInnerHTML={{__html: this.myRef.current.innerHTML}}/>}

推荐阅读