Question

我正在关注react-native的课程，我在尝试向页面添加模态组件时遇到了这个错误：

元素类型无效：期望一个字符串（用于内置组件）或一个类/函数（用于复合组件）但得到：undefined。

这是我的代码：

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

只有在我将confirm组件添加到EmployeeEdit时才会出现错误。当我删除底部的确认组件时，错误消失了。我的确认组件中是否有错误？

由于

Answer 1

在Confirm.js的底部，它应该是

export { Confirm };

不

export default { Confirm };

Answer 2

你可以避免花括号。

这样做。

在您的Confirm.js

中

export default Confirm

在您的EmployeeEdit.js

中

import Confirm from './Confirm'

如你所见，我省略了大括号。根据ES6文档，如果模块定义了默认导出，则可以导入默认导出而不使用花括号。请参阅此处：What is "export default" in javascript?

Answer 3

当您使用花括号

导入确认时

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

请确保您不会像使用默认那样导出它：

export default { Confirm };

因为一旦你使用默认语法，导入时不需要花括号语法。

React Native Element类型无效，预期字符串但未定义

3 个答案: