React JS：モーダルコンポーネントがレンダリングされない

Question

アプリケーションは正常に動作しますが、アイテムをクリックするとモーダルコンポーネントはレンダリングされません。 理由がわかりません。誰かが私を助けることができますpls。

ここに完全なソースコード： - https://www.webpackbin.com/bins/-KpOwCBrjy_PlP5t6-IH。オンラインでソースを変更して再生することができます。

app.js

import React, { Component } from 'react' 
import { // apis 
    Animated, 
    AppState, 
    AsyncStorage, 
    Clipboard, 
    Dimensions, 
    I18nManager, 
    NetInfo, 
    PanResponder, 
    PixelRatio, 
    StyleSheet, 
    // components 
    ActivityIndicator, 
    Button, 
    Image, 
    ProgressBar, 
    ScrollView, 
    Switch, 
    Text, 
    TextInput, 
    TouchableOpacity, 
    TouchableHighlight, 
    TouchableWithoutFeedback, 
    View, 
Modal } from 'react-native-web' 
import ReactDOM from 'react-dom'; 

export default class App extends Component { 
    state = { 
     orders: [ 
     { 
      id: '0', 
      name: '#0', 
      description: 'need pacemakers', 
      created_time: '7/1/2017 09:00', 
      created_by: 'Dr. John Chambers, M.S.', 
      approval_status: 'Pending', 
      requesting_dept: 'Cardiology', 
      items: 
      [ 
       { 
       id: '0', 
       name: 'single chamber pacemaker', 
       quantity: 10, 
       price: 50, 
       totalCost: 500 
       }, 
       { 
       id: '1', 
       name: 'dual chamber pacemaker', 
       quantity: 10, 
       price: 100, 
       totalCost: 1000 
       } 
      ] 
     }, 
     { 
      id: '1', 
      name: '#1', 
      description: 'ordering a camera', 
      created_time: '7/3/2017 09:00', 
      created_by: 'Dr. Susan Murray, M.S.', 
      approval_status: 'Approved', 
      requesting_dept: 'Gastroenterology' 
     }, 
     { 
      id: '2', 
      name: '#2', 
      description: 'thyroid surgery instruments', 
      created_time: '7/3/2017 13:00', 
      created_by: 'Dr. Robert Dsouza, M.S.', 
      approval_status: 'Approved', 
      requesting_dept: 'General surgery' 
     }, 
     { 
      id: '3', 
      name: '#3', 
      description: 'anaesthetic for Caesarean sections', 
      created_time: '7/3/2017 13:00', 
      created_by: 'Dr. Gregory House, M.D.', 
      approval_status: 'Approved', 
      requesting_dept: 'Anaesthetics' 
     } 
     ] 
    } 

    alertItemName = (item) => { 
    return (
     <Modal 
     animationType={'slide'} 
     transparent={false} 
     visible={true} 
     > 
     <View style={{flex:1,alignItems:'center',justifyContent:'center'}}> 
     <View> 
     <Text>Modal!</Text> 
     </View> 
     </View> 
     </Modal> 
    ); 
    } 

    render() { 
     return (
     <View> 
      { 
       this.state.orders.map((item, index) => (
        <TouchableOpacity 
        key = {item.id} 
        style = {styles.container} 
        onPress = {() => this.alertItemName(item)} 
        > 
        <Text style={styles.textBold}> 
         {item.name} 
        </Text> 
        <Text style={styles.textBold}> 
         {item.description} 
        </Text> 
        <Text style={styles.text}> 
         {item.created_by} 
        </Text> 
        <Text style={styles.text}> 
         {item.created_time} 
        </Text> 
        <Text style={styles.text}> 
         {item.requesting_dept} 
        </Text> 
        <Text style={styles.text}> 
         {item.approval_status} 
        </Text> 
        </TouchableOpacity> 
       )) 
      } 
     </View> 
    ) 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF' 
    } 
}); 

package.json

{ 
    "name": "webpackbin-project", 
    "version": "1.0.0", 
    "description": "Project boilerplate", 
    "scripts": { 
    "start": "webpack-dev-server --content-base build/ --port 3000" 
    }, 
    "dependencies": { 
    "react": "15.6.1", 
    "react-dom": "15.6.1", 
    "react-native-web": "0.0.113" 
    }, 
    "devDependencies": { 
    "html-webpack-plugin": "2.22.0", 
    "webpack-dev-server": "2.3.0", 
    "webpack": "^2.2.0", 
    "babel-core": "^6.23.1", 
    "babel-loader": "^6.2.10", 
    "babel-preset-es2015": "^6.22.0", 
    "babel-preset-react": "^6.5.0", 
    "babel-preset-stage-0": "^6.5.0", 
    "babel-plugin-transform-class-properties": "^6.23.0" 
    }, 
    "author": "WebpackBin", 
    "license": "ISC" 
} 

Answer 1

[OK]を私は "迅速かつ汚いやり方" であなたのフィドルを更新しました。基本的に、私がしたことは、あなたの州でショーモーダルのブールを設定していたことでした。コンポーネントをクリックすると、showModalがtrueに設定されます。状態が変更されると、renderが呼び出されます。 showModal boolのレンダリングチェックが真ならレンダリングします。

あなたの状態にmodalMessageを追加したり、モデルを隠す関数を追加したり（単にshowModal：falseを指定してsetStateを実行）、あなたは良いです！

alertItemName = (item) => { 
this.setState({...this.state, showModal:true}); //setState re-renders 
} 

render() { 
if (this.state.showModal) { // State condition 
    modal = 
    (<Modal 
    animationType={'slide'} 
    transparent={false} 
    visible={true} 
    > 
    <View style={{flex:1,alignItems:'center',justifyContent:'center'}}> 
    <View> 
    <Text>Modal!</Text> 
    </View> 
    </View> 
    </Modal>); 
} 

    return (
    <div> 
    {modal} //showing modal, if null, shows nothing 
    <View> 
     { 
      this.state.orders.map((item, index) => (
       <TouchableOpacity 
       key = {item.id} 
       style = {styles.container} 
       onPress = {() => this.alertItemName(item)} 
       > 
       <Text style={styles.textBold}> 
        {item.name} 
       </Text> 

       </TouchableOpacity> 
      )) 
     } 
    </View> 
    </div>