问题描述
我正在使用 chakra-ui
和 react-split-pane
。
如果我使用一个或另一个,它会工作得很好。如果我一起使用,页面是空白的,没有控制台错误消息。这是三个示例。
一起使用它们:
代码沙盒:https://codesandbox.io/s/patient-worker-x65r5?file=/src/index.js
// Doesn't work,page is blank w/ no error message.
import React from "react";
import ReactDOM from "react-dom";
import { ChakraProvider } from "@chakra-ui/react"
import SplitPane from "react-split-pane";
export function test() {
return(
<ChakraProvider>
<SplitPane split="vertical" minSize={200} defaultSize={200} maxSize={400}>
<div>123</div>
<div>456</div>
</SplitPane>
</ChakraProvider>
)
}
ReactDOM.render(
<Test />,document.getElementById("root")
);
仅使用 react-split-pane
:
// Works perfectly
export function test() {
return(
<SplitPane split="vertical" minSize={200} defaultSize={200} maxSize={400}>
<div>123</div>
<div>456</div>
</SplitPane>
)
}
仅使用 chakra-ui
:
// Works perfectly
export function test() {
return(
<ChakraProvider>
<div>123</div>
<div>456</div>
</ChakraProvider>
)
}
对这里可能发生的事情有什么想法吗?
我在 webpack 中使用 React+Typescript。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)