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

【问题标题】：How do I include a namespace with a react tsx import?如何在 react tsx 导入中包含命名空间？
【发布时间】：2020-01-01 17:47:30
【问题描述】：

当我尝试导入组件“deleteButton”时，编译器声称该类不存在。

我尝试使用导出默认值，并在别名下导入它。

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 元素。编译器声称： “JSX.IntrinsicElements”类型上不存在属性“deleteButton”。 TS2339

【问题讨论】：

标签： reactjs typescript react-tsx

【解决方案1】：

您需要将 JSX-Elements 编写为大写，以便 react 可以区分自定义元素和内置元素（如 span 或 div）。 Docs

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

import DeleteButton from './Components/deleteButton';

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

【讨论】：