Vyhledávání na webu

reactjs - Jak zahrnu namespace při importu react tsx?

Když se pokusím importovat komponentu 'deleteButton', překladač tvrdí, že třída neexistuje.

Zkoušel jsem použít export default a importovat ho pod aliasem.

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>);
  }
}

Očekávaným výstupem by měl být HTML element. Kompilátor uvádí: Vlastnost 'deleteButton' neexistuje u typu 'JSX.IntrinsicElements'. TS2339

Odpověď č. 1

Musíte psát JSX-prvky velkými písmeny, aby React mohl rozlišit mezi vlastními prvky a vestavěnými, jako jsou span nebo div. Dokumentace

Pokud to napíšete malými písmeny, bude hledat nativní prvek, který neexistuje. Takže změňte název na velká písmena a bude to fungovat:

import DeleteButton from './Components/deleteButton';

Doufám, že to pomůže. Šťastné kódování.

Související články