React JS：模态组件不呈现

Question

应用程序运行正常，但当我单击项目时，模态组件未呈现。不知道为什么。有人可以帮我吗

完整的源代码在这里：-- 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

好的，我在 "quick and dirty way" 中更新了您的 fiddle。基本上，我所做的就是在您的状态下设置一个 showModal bool。当您单击您的组件时，它会将 showModal 设置为 true。随着状态的改变，渲染被调用。为您渲染检查 showModal bool，如果为真，则渲染它。

您可以在您的状态中添加一个 modalMessage，添加一个函数来隐藏您的模型（只需使用 showModal:false 设置状态），就可以了！

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>

React JS：模态组件不呈现

React JS: Modal component not rendering

reactjs

react-native

react-native-web