React TS Hook 代码无法正确显示答案

【问题标题】：React TS Hook code cannot display correctlyReact TS Hook 代码无法正确显示
【发布时间】：2023-03-04 12:41:01
【问题描述】：

目标：
显示来自 Test1.tsx 的数据及其内容

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

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

信息：
*React TS 新手。

Stackblitz：
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>;
};

你好.tsx

import React from 'react';

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

【问题讨论】：

标签： react-tsx

【解决方案1】：

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

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

import { Testtest } from './Test1';

【讨论】：