可以将createroot与打字稿一起使用 - typeError：m.createroot不是函数

Question

我正在使用React 18和传单从事一个项目。 （我不认为传单是问题的一部分，但可能值得一提。）我试图在地图上添加自定义元素，但是使用Croteroot可以给我type> typeserror：m.croteroot不是函数< /代码>。 我想使用的内容的代码示例在这里：

import { MutableRefObject, ReactElement, useEffect } from 'react'

import L, { Map } from 'leaflet'
import { createRoot } from 'react-dom/client'

interface MapControlElementProps {
    mapRef: MutableRefObject<Map | null>
    button: ReactElement
    position: L.ControlPosition
}

export default function TestElement(props: MapControlElementProps) {
    useEffect(() => {
        const { mapRef, button, position } = props
        if (mapRef.current) {
            const MapHelp = L.Control.extend({
                onAdd: () => {
                    const controlElement = L.DomUtil.create(
                        'div',
                        'leaflet-control leaflet-bar'
                    )
                    const root = createRoot(controlElement)
                    root.render(button)
                    return controlElement
                },
            })
            const control = new MapHelp({ position })
            control.addTo(mapRef.current)
            return () => {
                control.remove()
            }
        }
        return () => {}
    }, [props])

    return null
}

唯一使用的是使用

ReactDOM.render(button, controlElement)

测试：

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

尽管ReactDom.Render有效，但我更喜欢使用Croteroot，因为我在其他地方使用了18种。

更新了2023年3月2日的情况

，我已经将问题跟踪到react-dom软件包，react-dom/client.js。

'use strict';

var m = require('react-dom');
if (process.env.NODE_ENV === 'production') {
  exports.createRoot = m.createRoot;
  exports.hydrateRoot = m.hydrateRoot;
} else {
  var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
  exports.createRoot = function(c, o) {
    i.usingClientEntryPoint = true;
    try {
      return m.createRoot(c, o);
    } finally {
      i.usingClientEntryPoint = false;
    }
  };
  exports.hydrateRoot = function(c, h, o) {
    i.usingClientEntryPoint = true;
    try {
      return m.hydrateRoot(c, h, o);
    } finally {
      i.usingClientEntryPoint = false;
    }
  };
}

到目前为止 如果确实要出版，则选择名称，但我知道什么。但是，周围有些戳，这表明我确实没有一个称为createroot的功能。现在该怎么办，我仍然不知道。

Answer 1

我在将应用程序从React 17升级到React 18时遇到了相同的问题。该应用最初是使用Create-react-app my-app -template tyspercript

错误：

TypeError: m.createRoot is not a function

修复我的修复程序是更新index.html以使用React 18脚本而不是更早的React 17。基本上，这是有道理的，因为React无法在React 17脚本中找到Croteroot的定义有能力的更新以使用React 18脚本时读取定义。

之前：当使用react 17

 <script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>            
 <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>

升级/ 解决问题：使用React 18时，

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

该问题应该包含在React升级文档中，但是在此响应时，我找不到它，在其他地方找不到任何帮助。希望这将帮助某人:)

参考：

• 缩小生产
• react-react-18-upgrade-guide