Question

如何使用类渲染反应组件？

我有以下代码：

class PageLogin extends React.Component {

    render() { 
       return (<p>hello</p>)
    }
}
export default PageLogin

当我导入它时，它会完全渲染组件，更新页面，那么我如何将它注入到渲染组件中的div？

Answer 1

好吧，我想我明白你的意思了。默认情况下，您无法指定单个组件的呈现位置。您告诉主要组件在<div id="id"></div>中呈现，这意味着每个组件都将使用该div作为呈现根。

但是，从React v16开始，您可以使用ReactDOM.createPortal在任何元素中渲染组件。

class PageLogin extends React.Component {

    render() {
        return (
            <div>
                {ReactDOM.createPortal(<p>hello</p>, document.getElementById('anotherRoot'))}
            </div>
        )
    }
}
export default PageLogin

理想情况下，您希望将代码移动到呈现PageLogin的任何位置：

render() {
    return (
        <div>
            {ReactDOM.createPortal(<PageLogin />, document.getElementById('anotherRoot'))}
        </div>
    )
}

React - 使用类的元素内的路由器

1 个答案: