npm 如何正确导入React实验钩子?

6tdlim6h  于 12个月前  发布在  React
关注(0)|答案(1)|浏览(208)

我正在尝试学习React的一些未发布的“不稳定”特性。特别是,我想使用“useEventEvent”钩子。
问题是我不能以任何方式导入包的这一部分。
当我尝试以这种方式从React官方包导入一些东西时:

import * as React from "react"

字符串
模块自动指向此目录(@types/react npm包)

node_modules/@types/react/index"


这里有一些实验性的钩子(比如“React.experimental_usebutEvent”):

node_modules/react/index"


CRA和Vite都会发生这种情况,我尝试使用标准JS构建(没有TS,没有tsconfig文件)。
我如何才能到达React的代码的那一部分?谢谢

cczfrluj

cczfrluj1#

这有两个(或三个)方面(都在the documentation中显示,尽管#2有点微妙[它在顶部,但不在代码示例中]):
1.您必须使用react@experimentalreact-dom@experimental模块。
1.这个钩子的名字是experimental_useEffectEvent,而不仅仅是useEffectEvent
于是:

import { experimental_useEffectEvent } from "react";
// ...
experimental_useEffectEvent(/*...*/);

字符串
或者(现在):

import { experimental_useEffectEvent as useEffectEvent } from "react";
// ...
useEffectEvent(/*...*/);


Codesandbox example
如果你使用的是TypeScript,你需要阅读@types/react模块的experimental.d.ts文件中的说明,看看如何让TypeScript识别实验性钩子。有几种不同的方法;其中一种更简单的方法是将其添加到项目中的任何文件中(我使用的是App.tsx):

/// <reference types="react/experimental" />


FWIW,以下是我如何使用实验功能引导一个新项目:

  • npm create vite@latest(我使用Vite.js作为我的编译器)。
  • 从列表中选择React
  • 从列表中选择TypeScript
  • npm install react@experimental react-dom@experimental
  • 已将预提供的App.tsx替换为:
/// <reference types="react/experimental" />
import { experimental_useEffectEvent as useEffectEvent } from "react";
import "./App.css";

function App() {
    return <div>typeof useEffectEvent: {typeof useEffectEvent}</div>;
}

export default App;

当我运行它的时候,我在页面上得到typeof useEffectEvent: function
我不使用create-react-app,但我确实短暂地尝试过,但在将React升级到实验版本时遇到了依赖性问题。

相关问题