サードパーティ製のReactコンポーネントを使用しているときに "setStateが定義されていません"

Question

私はReactを初めて使用しています。これを既存のアプリケーションに統合してUIをマテリアルデザインに更新したいのです（Babelおよびwebpack）。とりわけ、私はmaterial-ui-bottom-sheetによって提供されるボトムシートコンポーネントを統合したいと考えていました。コンポーネントは自分のアプリケーションに表示しながら、私はここで働い例（https://teamwertarbyte.github.io/material-ui-bottom-sheet/）公式サンプルサイトからコードをコピーしたので、予想されるように、コンポーネントの状態を設定するためのコールバック（それによってその視認性）

Uncaught ReferenceError: setState is not defined 
at onRequestClose (verwaltung.js?8a80:70) 
at Object.ReactErrorUtils.invokeGuardedCallback (ReactErrorUtils.js?8875:69) 
at executeDispatch (EventPluginUtils.js?5685:85) 
at Object.executeDispatchesInOrder (EventPluginUtils.js?5685:108) 
at executeDispatchesAndRelease (EventPluginHub.js?3c44:43) 
at executeDispatchesAndReleaseTopLevel (EventPluginHub.js?3c44:54) 
at Array.forEach (<anonymous>) 
at forEachAccumulated (forEachAccumulated.js?2859:24) 
at Object.processEventQueue (EventPluginHub.js?3c44:254) 
at runEventQueueInBatch (ReactEventEmitterMixin.js?9870:17) 

もたらします私はこの動作の原因と、なぜこれが私のために働いていないのだろうと考えています。 コンポーネントを示すために自分のアプリケーションの関連するコードは次のように

HTML：

[...] 
<div id="bottom-sheet"></div> 
[...] 

Javascriptを：

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import AppBar from 'material-ui/AppBar'; 

// Bottom sheet 
import { ExpandableBottomSheet, BottomSheet } from 'material-ui-bottom-sheet'; 
import { List, ListItem, Subheader, FloatingActionButton } from 'material-ui'; 
import MapsDirectionsCar from 'material-ui/svg-icons/action/done'; 
import Divider from 'material-ui/Divider'; 

import injectTapEventPlugin from 'react-tap-event-plugin'; 
injectTapEventPlugin(); 

const InfoSheet =() => (
    <MuiThemeProvider> 
     <div> 
      <ExpandableBottomSheet 
       action={ 
        <FloatingActionButton> 
         <MapsDirectionsCar/> 
        </FloatingActionButton> 
       } 
       onRequestClose={() => setState({isOpen: false})} 
       open 
      > 
       <h1 style={{marginLeft: 72, marginTop: 40}}>Dandelion Chocolate</h1> 
       <Divider inset/> 
       <List> 
        <ListItem primaryText="740 Valencia St, San Francisco, CA"/> 
        <ListItem primaryText="(415) 349-0942"/> 
        <ListItem primaryText="Wed, 10 AM - 9 PM"/> 
        <ListItem primaryText="740 Valencia St, San Francisco, CA"/> 
       </List> 
      </ExpandableBottomSheet> 
     </div> 
    </MuiThemeProvider> 
); 

ReactDOM.render(
    <InfoSheet />, 
    document.getElementById('bottom-sheet') 
); 

私は「オープンを設定しよう"プロパティから" {state.isOpen} "アプリケーションがアノテーションをスローします彼女のエラー"状態"は定義されていません。

私は何をここで行方不明、なぜコンポーネントのスコープにSETSTATEと状態ではないのですか？

Answer 1

あなたのインフォシートコンポーネントは、lifecycle functions,stateまたはthisというキーワードを持たないステートレスコンポーネントです。 React.Componentクラスを拡張するインフォシートコンポーネントを書く

class InfoSheet extends React.Component { 
constructor(props) { 
    super(props); 
    this.state = {isOpen: true} 
} 
render() { 
    return (
     <MuiThemeProvider> 
     <div> 
      <ExpandableBottomSheet 
       action={ 
        <FloatingActionButton> 
         <MapsDirectionsCar/> 
        </FloatingActionButton> 
       } 
       onRequestClose={() => this.setState({isOpen: false})} 
       open={this.state.isOpen} 
      > 
       <h1 style={{marginLeft: 72, marginTop: 40}}>Dandelion Chocolate</h1> 
       <Divider inset/> 
       <List> 
        <ListItem primaryText="740 Valencia St, San Francisco, CA"/> 
        <ListItem primaryText="(415) 349-0942"/> 
        <ListItem primaryText="Wed, 10 AM - 9 PM"/> 
        <ListItem primaryText="740 Valencia St, San Francisco, CA"/> 
       </List> 
      </ExpandableBottomSheet> 
     </div> 
    </MuiThemeProvider> 
    ) 
} 
}