Reactjs React JS:模态组件未渲染

应用程序运行正常，但当我点击项目时，模式组件并没有呈现。 不知道为什么。有人能帮我吗

完整的源代码在这里：-。您可以在线修改源代码并使用它

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'
  }
});

---

好的，我用“快速肮脏的方式”更新了你的小提琴。基本上，我所做的就是在你们州设置一个showmodel bool。单击组件时，它会将showModal设置为true。当状态更改时，将调用render。对showModal bool进行渲染检查，如果为true，则渲染它

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

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>

alertItemName=（项目）=>{
this.setState（{…this.state，showmodel:true}）；//setState重新呈现
}
render（）{
if（this.state.showmodel）{//状态条件
模态=
(
情态动词
);
}
返回(
{modal}//显示模态，如果为null，则不显示任何内容
{
this.state.orders.map（（项目，索引）=>(
this.alertItemName（item）}
>
{item.name}
))
}

实际上，您并没有要求它在任何地方渲染。您只是在按下按钮时返回它。您应该在alertItemName检查alertItemName方法中更改您的状态。无需更改状态。visible={true}我不知道我的更改在webpackbin上的持久性如何，但我更新了它，并用准确的代码回答了您。尝试了解所有状态和呈现，这并不难。您必须获取所有此页面才能快速进入react：

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>