1

我正在使用chakra-ui，以及react-split-pane。

如果我使用其中一种，它会很好用。如果我一起使用它们，页面是空白的，没有控制台错误消息。这里举三个例子。

一起使用它们：

CodeSandbox：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。

4

0 回答 0