Question

背景

我有一个使用普通javascript和HTML编写的Web应用程序。我正在尝试找到一种逐渐将其转换为React应用程序的方法。为此，我试图使用react组件创建新功能。此应用程序使用Javascript之上的Typescript，我们未使用Webpack或任何捆绑程序。

场景

这是我正在处理的示例代码

<body>
   <div id="my_container"></div>     

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

myFile.tsx

interface WelcomeProps {
  name: string,
 }

 const Welcome: React.FunctionComponent<WelcomeProps> = (props) => {
  return <h1>Hello, {props.name}</h1>;
 }

const domContainer = document.querySelector('#my_container');
ReactDOM.render(<Welcome name="World"/>, domContainer);

我手动将此代码编译为javascript，然后使用npx babel --watch .\ui\react\ --out-dir .\ui\ --presets react-app/prod对其进行编译，效果很好。我可以在页面上看到我的组件。

问题

让我感到困惑的是，我无法在组件中使用useState()之类的React Hooks。如果我在打字稿文件中添加类似const [dummyValue, setDummyValue] = useState(0);的内容，则由于它无法识别useState，因此显然失败了。另一方面，如果我像

那样导入它们

import {useState} from 'react'; import ReactDOM from 'react-dom';

它也不起作用。我在调试模式下看到react_1是一个空对象。

更新

这样导入库，会使ReactDOM为空对象。不确定为什么。

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

interface WelcomeProps {
  name: string,
 }

 const Welcome: React.FunctionComponent<WelcomeProps> = (props) => {
  const [dummyValue, setDummyValue] = useState(0);
  return <h1>Hello, {props.name}</h1>;
 }

const domContainer = document.querySelector('#my_container');
ReactDOM.render(<Welcome name="World"/>, domContainer);

Answer 1

1）useState挂钩是有效的React挂钩。它应该工作正常。您可以参考official文档中的钩子列表以及如何使用它们。

2）除了导入useState钩子，您还需要导入React包，以允许Babel检测React和JSX语法。

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { useState } from 'react';

如果将esModuleInterop设置为true，则可以直接执行以下操作：

import ReactDOM from 'react-dom';
import React, { useState } from 'react';

3）使用React.FC功能组件的声明就足够了。

const Welcome: React.FC<WelcomeProps> = ({ name }) => {
  return <h1>Hello, {name}</h1>;
}

在打字稿中反应钩子

1 个答案: