collapsibleList.js:32未捕获的TypeError:_this.props.renderVisibleItem不是函数

时间:2018-07-23 20:05:20

标签: blueprintjs

我正在尝试创建CollapsibleList,但出现以下错误:

collapsibleList.js:32 Uncaught TypeError: _this.props.renderVisibleItem is not a function
    at collapsibleList.js:32
    at Array.map (<anonymous>)
    at CollapsibleList../node_modules/@blueprintjs/core/dist/esm/components/collapsible-list/collapsibleList.js.CollapsibleList.render (collapsibleList.js:30)
    at ReactCompositeComponent.js:793
    at measureLifeCyclePerf (ReactCompositeComponent.js:73)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:792)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:819)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:359)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255)
    at Object.mountComponent (ReactReconciler.js:43)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:368)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255)
    at Object.mountComponent (ReactReconciler.js:43)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:368)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:255)
    at Object.mountComponent (ReactReconciler.js:43)
    at mountComponentIntoNode (ReactMount.js:102)
    at ReactReconcileTransaction.perform (Transaction.js:141)
    at batchedMountComponentIntoNode (ReactMount.js:124)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:141)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:60)
    at Object.batchedUpdates (ReactUpdates.js:95)
    at Object._renderNewRootComponent (ReactMount.js:317)
    at Object._renderSubtreeIntoContainer (ReactMount.js:399)
    at Object.render (ReactMount.js:420)
    at Object../src/index.js (index.js:23)
    at __webpack_require__ (bootstrap 7571343f40603383ffa9:678)
    at fn (bootstrap 7571343f40603383ffa9:88)
    at Object.0 (index.js:23)
    at __webpack_require__ (bootstrap 7571343f40603383ffa9:678)
    at bootstrap 7571343f40603383ffa9:724
    at bootstrap 7571343f40603383ffa9:724
(anonymous) @ collapsibleList.js:32
./node_modules/@blueprintjs/core/dist/esm/components/collapsible-list/collapsibleList.js.CollapsibleList.render @ collapsibleList.js:30
(anonymous) @ ReactCompositeComponent.js:793
measureLifeCyclePerf @ ReactCompositeComponent.js:73
_renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js:792
_renderValidatedComponent @ ReactCompositeComponent.js:819
performInitialMount @ ReactCompositeComponent.js:359
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
performInitialMount @ ReactCompositeComponent.js:368
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
performInitialMount @ ReactCompositeComponent.js:368
mountComponent @ ReactCompositeComponent.js:255
mountComponent @ ReactReconciler.js:43
mountComponentIntoNode @ ReactMount.js:102
perform @ Transaction.js:141
batchedMountComponentIntoNode @ ReactMount.js:124
perform @ Transaction.js:141
batchedUpdates @ ReactDefaultBatchingStrategy.js:60
batchedUpdates @ ReactUpdates.js:95
_renderNewRootComponent @ ReactMount.js:317
_renderSubtreeIntoContainer @ ReactMount.js:399
render @ ReactMount.js:420
./src/index.js @ index.js:23
__webpack_require__ @ bootstrap 7571343f40603383ffa9:678
fn @ bootstrap 7571343f40603383ffa9:88
0 @ index.js:23
__webpack_require__ @ bootstrap 7571343f40603383ffa9:678
(anonymous) @ bootstrap 7571343f40603383ffa9:724
(anonymous) @ bootstrap 7571343f40603383ffa9:724

我已安装@blueprintjs/core@1.35.1并具有以下代码:

import React from "react";
import ReactDOM from "react-dom";
import { CollapsibleList, Classes, MenuItem } from "@blueprintjs/core";

const App = props => {
  return (
    <CollapsibleList
      className={Classes.BREADCRUMBS}
      dropdownTarget={<span className={Classes.BREADCRUMBS_COLLAPSED} />}
      visibleItemRenderer={props => {
        console.log(props.text);
        return props.text;
      }}
    >
      <MenuItem text="Show topic details" />
      <MenuItem text="Show all proposals" />
      <MenuItem text="Add proposal" />
      <MenuItem text="My proposals" />
    </CollapsibleList>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

我在做什么错了?

0 个答案:

没有答案