React TS Hook 代码无法正确显示

Question

目标：
显示来自 Test1.tsx

的数据及其内容

问题：
当我在 index.tsx 应用代码 " <Testtest name={name} />" 时，它提到了 “元素类型无效：应为字符串（对于内置组件）或 class/function（对于复合组件）但得到：未定义。您可能忘记从定义它的文件中导出组件，或者您可能混淆了默认导入和命名导入。“

我不明白。我缺少代码的哪一部分？

信息：
*React TS 新手。

堆栈闪电战：
https://stackblitz.com/edit/react-ts-nanzy5?

谢谢！

index.tsx

import React, { Component, useState, useEffect } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import Testtest from './Test1';
import './style.css';

interface AppProps {}
interface AppState {
  name: string;
}

const App = () => {
  const [name, setName] = useState('default valussse');
  const [name1, setName1] = useState('default valsssue1');

  return (
    <div>
      <Hello name={name} />
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <Hello name={name1} />
      <input value={name1} onChange={(e) => setName1(e.target.value)} />
      <Testtest name={name} />
    </div>
  );
};

render(<App />, document.getElementById('root'));

Test1.tsx

import React from 'react';

export const Testtest = ({ name }) => {
  return <h1>Hello {name}!</h1>;
};

Hello.tsx

import React from 'react';

export default ({ name }) => <h1>Testtest {name}!</h1>;

Answer 1

我认为这是因为 Test1.tsx 中的导出不是默认导出，但您正在导入 index.tsx 中的默认导出。

尝试将 index.tsx 的第 4 行更改为：

import { Testtest } from './Test1';

React TS Hook 代码无法正确显示

React TS Hook code cannot display correctly

react-tsx