在参考文件中渲染ReactPortal

Question

我想要实现的是在ref内部呈现ReactPortal，从而在React应用程序本身内部呈现，而不是在外部呈现DOM节点。

我在Codepen上做了一个例子->https://codepen.io/Gesma94/pen/RqKZmM

class Legend extends React.Component {
constructor(props) {
super(props);
}
render() {
if (this.props.useRef)
return ReactDOM.createPortal(<div className="legend">Something</div>, this.props.ref);
else
return <div className="legend">Something else</div>;
}
}
class Chart extends React.Component {
private myref;
render() {
return (
<div>
<div className="container" ref={r => this.myref = r}>First Container</div>
<Legend ref={this.myref} useRef={false} />
</div>
);
}
}
ReactDOM.render(<Chart />, document.getElementById('root'));

所以，基本上：在Chart组件中，我保存第一个div的ref，然后将该ref传递给Legend组件。在Legend组件中，如果props useRef为true，我想使用createPortal((返回Chart的div中的div。

问题是React抛出我的错误：TypeScript告诉我"类型为‘RefOject’的参数不可分配给类型为‘Element’的分隔符

现在，我不知道我想做的事情是否可能，但如果可能的话，你们能帮我一点吗？也许我错过了裁判的一些东西(我想是一些转换，但我真的不知道该怎么办(。

谢谢！

Answer 1

您必须首先确保您的ref已经创建，这是在首次安装组件时创建的。React内部使用ref道具与使用key道具非常相似，因此必须将其命名为其他道具，并将其视为其他道具。

示例

class Legend extends React.Component {
render() {
if (this.props.useRef) {
return ReactDOM.createPortal(
<div className="legend">Something</div>,
this.props.portalRef
);
}
return <div className="legend">Something else</div>;
}
}
class Chart extends React.Component {
myref = null;
state = { mounted: false };
componentDidMount() {
// The ref has been created when the component has mounted.
this.setState({ mounted: true });
}
render() {
return (
<div>
<div className="container" ref={r => this.myref = r}>
First Container
</div>
{this.state.mounted && <Legend portalRef={this.myref} useRef />}
</div>
);
}
}
ReactDOM.render(<Chart />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"><div>