如何在 react tsx 导入中包含命名空间？

Question

当我尝试导入组件 'deleteButton' 时，编译器声称 class 不存在。

我试过使用导出默认值，然后在别名下导入它。

import React from 'react';
import deleteButton from './Components/deleteButton';

const App: React.FC = () => {
  return (
    <deleteButton/>

  );
}

export default App;

import React from 'react';
import { confirmAlert } from 'react-confirm-alert';
import 'react-confirm-alert/src/react-confirm-alert.css';

export default class deleteButton extends React.Component {
  submit = () => {
    confirmAlert({
      title: 'Confirm to delete',
      message: 'Are you sure to delete this file?.',
      buttons: [
        {
          label: 'Yes',
          onClick: () => alert('File deleted')
        },
        {
          label: 'No',
          onClick: () => alert('Canceled')
        }
      ]
    });
  };
  render() {
    return (<div className='container'>
      <button onClick={this.submit}>Delete</button>
    </div>);
  }
}

预期的输出应该是一个 HTML 元素。编译器声称：属性 'deleteButton' 在类型 'JSX.IntrinsicElements' 上不存在。 TS2339

Answer 1

您需要将 JSX-Elements 写成大写，这样 React 才能区分自定义元素和内置元素，例如 span 或 div。 Docs

如果你把它写成小写，它会寻找一个不存在的原生元素。所以把名字改成大写就可以了：

import DeleteButton from './Components/deleteButton';

希望这对您有所帮助。编码愉快。

如何在 react tsx 导入中包含命名空间？

How do I include a namespace with a react tsx import?

typescript

reactjs

react-tsx