Estoy renderizando un componente React simple usando Typescript. El problema es que cuando lo renderizo en el método ReactDOM.redner me sale el siguiente error:
This expression is not callable. Type 'void' has no call signatures.Y no estoy seguro de por qué, ¿cómo puedo solucionarlo y renderizar mi componente? Aquí está mi código:
import * as React from 'react'; import * as ReactDOM from 'react-dom'; import SplitButton from '../../../src/ListButton/SplitButton' const App = () => { const items: any = ['Item1', 'Item2', 'Item3']; return ( <div> <SplitButton items={items} text="Enabled Button" /> <SplitButton disabled={true} items={items} text="Disabled Button" /> </div> ); } ReactDOM.render( <App />, document.querySelector('my-app') )Puede usar install react package, luego require. por ejemplo
npm install react-split-button --saveentonces puedes usar el componente SplitButton. importar SplitButton desde ....
var SplitButton = require('react-split-button') var items = [ { label: 'save as', onClick: function(){ console.log('saved as') }, items: [ { label: 'PDF', onClick: function(){ console.log('save as PDF') } }, { label: 'Postscript' } ] }, { label: 'export', onClick: function(){ console.log('exported') } }, ] function save(){ console.log('SAVED!') } <SplitButton items={items} onClick={save}> Save </SplitButton> function onMenuClick(event, itemProps){ console.log('You clicked ', itemProps.data.label) } <SplitButton items={items} onMenuClick={onMenuClick} onClick={save}> Save </SplitButton> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>Parece que estás usando Kendo React. El componente SplitButton es una exportación con nombre de @progress/kendo-react-buttons , por lo que debe volver a trabajar en la línea de importación de la siguiente manera.
También eliminé cualquier tipo de anotación donde se declaran los elementos , ya que no es útil y, en realidad, en tal caso, es más seguro dejar que TypeScript adivine que los elementos son una colección de cadenas.
import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { SplitButton } from '@progress/kendo-react-buttons'; const App = () => { const items = ['Item1', 'Item2', 'Item3']; return ( <div> <SplitButton items={items} text="Enabled Button" /> <SplitButton disabled={true} items={items} text="Disabled Button" /> </div> ); } ReactDOM.render( <App />, document.querySelector('my-app') )