Typescript 中的 React Hooks

Question

Background背景

I have a web application written in vanilla javascript and HTML.我有一个用普通 javascript 和 HTML 编写的 web 应用程序。 I'm trying to find a way to gradually convert it to a react app.我正在尝试找到一种方法将其逐渐转换为 React 应用程序。 For that, I am trying to create new features using react components.为此，我正在尝试使用反应组件创建新功能。 This app is using Typescript on top of Javascript and we are not using Webpack or any bundlers.这个应用程序在 Javascript 之上使用 Typescript，我们没有使用 Webpack 或任何捆绑器。

Scenario设想

Here is the sample code I'm working on这是我正在处理的示例代码

<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我的文件.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);

I manually compile this code to javascript then I transpile it using npx babel --watch.\ui\react\ --out-dir.\ui\ --presets react-app/prod and it works fine.我手动将此代码编译为 javascript 然后我使用 npx npx babel --watch.\ui\react\ --out-dir.\ui\ --presets react-app/prod它，它工作正常。 I can see my component being rendered on the page.我可以看到我的组件正在页面上呈现。

Problem问题

The thing that I'm confused about is that I cannot use React Hooks like useState() in the component.我感到困惑的是我不能在组件中使用像useState()这样的 React Hooks。 If I add something like const [dummyValue, setDummyValue] = useState(0);如果我添加类似const [dummyValue, setDummyValue] = useState(0); in my typescript file, it obviously fails as it does not recognize useState .在我的 typescript 文件中，它显然失败了，因为它无法识别useState 。 On the other hand, if I import them like另一方面，如果我像这样导入它们

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

it doesn't work either.它也不起作用。 I see in the debug mode that react_1 is an empty object.我在调试模式下看到react_1是一个空的 object。

UPDATE更新

Importing libraries like this, causes ReactDOM to be an empty object.像这样导入库会导致 ReactDOM 为空 object。 Not sure why though.不知道为什么。

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) The useState hook is a valid React hook. 1) useState钩子是一个有效的 React 钩子。 It should work just fine.它应该工作得很好。 You refer to the official documentation for the list of hooks, and how to use them.您可以参考官方文档中的钩子列表以及如何使用它们。

2) In addition to importing the useState hook, you will also need to import the React package, in order to allow Babel to detect React and JSX syntax. 2) 除了导入useState钩子，你还需要导入React package，以便让 Babel 检测 React 和 JSX 语法。

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

If esModuleInterop is set to true , you can simply do this instead:如果esModuleInterop设置为true ，您可以简单地这样做：

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

3) It will be sufficient to use React.FC the declaration of your functional component. 3) 使用React.FC声明你的功能组件就足够了。

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

Typescript 中的 React Hooks

问题描述

1 个解决方案

解决方案1
0 2020-06-16 03:15:23

Typescript 中的 React Hooks

问题描述

1 个解决方案

解决方案1 0 2020-06-16 03:15:23

解决方案1
0 2020-06-16 03:15:23