时间戳

首页 > 解决方案 > 如何在 react tsx 导入中包含命名空间？

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

问题描述

当我尝试导入组件“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

标签： reactjstypescriptreact-tsx

解决方案

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

如果你把它写成小写，它会寻找一个不存在的原生元素。因此，将名称更改为大写，它将起作用：

import DeleteButton from './Components/deleteButton';

希望这可以帮助。快乐编码。

推荐阅读