はネイティブ要素型が無効な文字列を期待しますが、私は反応し、ネイティブのコースを以下だし、ページへのモーダルコンポーネントを追加しようとしたとき、私はちょうどこのエラーに遭遇した未定義

Question

を持っているリアクト無効：文字列（組み込みコンポーネントの場合）またはクラス/関数（複合コンポーネントの場合）が必要ですが、未定義です。

ここに私のコードです：

EmployeeEdit.js

import _ from 'lodash'; 
import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import Communications from 'react-native-communications'; 
import { employeeUpdate, employeeSave, employeeReset } from '../actions'; 
import { Card, CardSection, Button, Confirm } from './common'; 
import EmployeeForm from './EmployeeForm'; 


class EmployeeEdit extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { showModal : false}; 

    this.onButtonPress = this.onButtonPress.bind(this); 
    this.onTextPress = this.onTextPress.bind(this); 
    } 

    componentWillMount() { 
    _.each(this.props.employee, (value, prop) => { 
     this.props.employeeUpdate({prop, value}); 
    }); 
    } 

    componentWillUnmount() { 
    this.props.employeeReset(); 
    } 

    onButtonPress(){ 
    const { name, phone, shift } = this.props; 
    this.props.employeeSave({ name, phone, shift, uid: this.props.employee.uid }); 
    } 

    onTextPress(){ 
    const { name, phone, shift } = this.props; 
    Communications.text(phone, `Hello ${name}, your upcoming shift is on ${shift}`); 
    } 

    render() { 
    return (
     <Card> 
     <EmployeeForm {...this.props} /> 
     <CardSection> 
      <Button onPress={this.onButtonPress}> 
      Save Changes 
      </Button> 
     </CardSection> 
     <CardSection> 
      <Button onPress={this.onTextPress}> 
      Text Schedule 
      </Button> 
     </CardSection> 
     <CardSection> 
      <Button onPress={()=> this.setState({ showModal: !this.state.showModal })}> 
      Fire Employee 
      </Button> 
     </CardSection> 
     <Confirm 
      visible={this.state.showModal} 
     > 
      Are you sure you want to fire this employe? 
     </Confirm> 
     </Card> 
    ); 
    } 
} 

const mapStateToProps = (state) => { 
    const {name, phone, shift} = state.employeeForm; 
    return {name, phone, shift}; 
}; 

export default connect(mapStateToProps, { 
    employeeUpdate, 
    employeeSave, 
    employeeReset 
})(EmployeeEdit); 

がConfirm.js

import React from 'react'; 
import { Text, View, Modal } from 'react-native'; 
import { CardSection } from './CardSection'; 
import { Button } from './Button'; 

const Confirm = ({ children, visible, onAccept, onDecline }) => { 
    const { containerStyle, textStyle, cardSectionStyle } = styles; 

    return (
    <Modal 
     visible={visible} 
     transparent 
     animationType='slide' 
     onRequestClose={() => {}} 
    > 
     <View style={containerStyle}> 
     <CardSection style={cardSectionStyle}> 
      <Text style={textStyle}> 
      {children} 
      </Text> 
     </CardSection> 

     <CardSection> 
      <Button onPress={onAccept}>Yes</Button> 
      <Button onPress={onDecline}>No</Button> 
     </CardSection> 
     </View> 
    </Modal> 
); 
}; 

const styles = { 
    cardSectionStyle: { 
    justifyContent: 'center' 
    }, 
    textStyle: { 
    flex: 1, 
    fontSize: 18, 
    textAlign: 'center', 
    lineHeight: 40 
    }, 
    containerStyle: { 
    backgroundColor: 'rgba(0, 0, 0, 0.75)', 
    position: 'relative', 
    flex: 1, 
    justifyContent: 'center' 
    } 
}; 

export default { Confirm }; 

私はEmployeeEditに確認コンポーネントを追加するときにエラーが発生します。一番下の確認コンポーネントを削除するとエラーが消えます。確認コンポーネントに何らかのエラーがありますか？

おかげ

Answer 1

Confirm.jsの下部にはそれが

export { Confirm }; 

あるべきではない

export default { Confirm }; 

Answer 2

あなたは、中括弧

import { Card, CardSection, Button, Confirm } from './common'; 

を使用して 確認を読み込みますあなたは デフォルト構文を使用したらインポートするとき、それは中括弧構文を必要としないため

export default { Confirm }; 

：

はあなたが何をしたかのようなデフォルトを使用して、それをエクスポートしていないことを確認してください。

Answer 3

花括弧をすべて避けることができます。

これを行う。

あなたConfirm.jsで

export default Confirm 

あなたEmployeeEdit.jsで

import Confirm from './Confirm' 

ご覧のように、私は、中括弧を省略しています。 ES6ドキュメンテーションによると、モジュールがデフォルトのエクスポートを定義する場合、中括弧を使用せずにデフォルトのエクスポートをインポートできます。ここをクリックしてください：What is "export default" in javascript?