渲染 React 组件返回此表达式不可调用。 “void”类型没有调用签名

Question

我正在使用 Typescript 渲染一个简单的 React 组件。 问题是，当我在ReactDOM.redner方法中渲染它时，我收到以下错误：

This expression is not callable.
  Type 'void' has no call signatures.

我不知道为什么，我该如何修复它并渲染我的组件？ 这是我的代码：

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" /> &nbsp;
        <SplitButton disabled={true} items={items} text="Disabled Button" />
      </div>
      );
}

ReactDOM.render(
  <App />,
      document.querySelector('my-app')
  )

Answer 1

您可以使用 install react 包，然后使用 require。 例如

npm install react-split-button --save

那么你可以使用 SplitButton 组件。 从...导入 SplitButton

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>

Answer 2

看起来您正在使用 Kendo React。 SplitButton组件是来自@progress/ kendo -react-buttons的命名导出，因此您需要按如下方式修改导入行。

我还删除了声明项目的any类型注释，因为它没有用，实际上在这种情况下，让 TypeScript 猜测项目是字符串的集合会更安全。

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" /> &nbsp;
        <SplitButton disabled={true} items={items} text="Disabled Button" />
      </div>
    );
}

ReactDOM.render(
  <App />,
  document.querySelector('my-app')
)

见演示