React JS：模态组件不渲染

问题描述：

应用程序运行良好，但是当我点击项目时莫代尔组件没有渲染。不知道为什么。有人可以帮我请。React JS：模态组件不渲染

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

其实，你并没有要求它在任何地方渲染。你只是在报刊上回复它。你应该改变你的状态在你的alertItemName – Nevosis

检查alertItemName方法。无需改变状态。 visible = {true} – user1

我不知道webpackbin上的更改有多持久，但我更新了它并用确切的代码回答了您的问题。尝试了解所有的状态和渲染，这并不难。你必须让这个页面快速完成反应：https：//facebook.github.io/react/docs/state-and-lifecycle.html – Nevosis

答

好吧，我更新了小提琴在一个 “快速和肮脏的方式。”基本上，我所做的只是在你的状态下设置showModal布尔。当你点击你的组件时，它将showModal设置为true。随着状态改变，渲染被调用。渲染检查你的showModal布尔，如果它是真的，它渲染它。

你可以在你的状态下添加一个modalMessage，添加一个函数来隐藏你的模型（简单的setState和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：模态组件不渲染

相关推荐