是否可以在 react 的根外部(在正文下方)将反应上下文注入 div

我正在使用反应细胞景观库。尝试集成到细胞景观的波普尔插件。 popper "content" 属性期望返回一个div 元素，描述附加到 "body" 元素的 popper。由于上下文提供者位于根元素下，因此该div 不能是该上下文的使用者。我如何在根外部定义的 popper 元素中也使用相同的上下文。

使用 React 组件进行 cytoscape 但 cytoscape 的插件是纯 js 中的。

<body>
<div id=root>
<Style_Provider>
.
.
.
</Style_Provider>
</div>
<div id="popper">
// need to access to style context
</div>
</body>

正如 Eric Hasselbring 所说，门户解决了这个用例：

门户提供了一种将子节点呈现到父组件的 DOM 层次结构之外的 DOM 节点的一流方法。

下面是一个使用上下文的示例：

const ExampleContext = React.createContext(
"default context"
);
class Example extends React.Component {
render() {
return (
<ExampleContext.Provider value="context from Example">
<div>
This is the parent comnponent.
<MyPortal />
</div>
</ExampleContext.Provider>
);
}
}
class MyPortal extends React.Component {
static contextType = ExampleContext;
render() {
return ReactDOM.createPortal(
<div>This is "my portal," context stuff is "{this.context}"</div>,
document.getElementById("portal")
);
}
}
ReactDOM.render(
<Example />,
document.getElementById("root")
);

<div id="root"></div>
<hr>
<div id="portal"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

在评论中，您说：

波普尔动态创建这些"div"。因此，我最初无法创建"我的门户"组件。

只需有条件地创建门户即可。这是上面的内容，但有一个按钮来显示/隐藏门户：

const ExampleContext = React.createContext(
"default context"
);
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
showPortal: false
};
this.showHideClick = this.showHideClick.bind(this);
}
showHideClick() {
this.setState(({showPortal}) => ({showPortal: !showPortal}));
}
render() {
const {showPortal} = this.state;
return (
<ExampleContext.Provider value="context from Example">
<div>
This is the parent comnponent.
<input type="button" value={showPortal ? "Hide" : "Show"} onClick={this.showHideClick}/>
{showPortal && <MyPortal />}
</div>
</ExampleContext.Provider>
);
}
}
class MyPortal extends React.Component {
static contextType = ExampleContext;
render() {
return ReactDOM.createPortal(
<div>This is "my portal," context stuff is "{this.context}"</div>,
document.getElementById("portal")
);
}
}
ReactDOM.render(
<Example />,
document.getElementById("root")
);

<div id="root"></div>
<hr>
<div id="portal"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

相关内容

最新更新

热门标签：