视图中的意外令牌反应本机答案

【问题标题】：Unexpected token in view react native视图中的意外令牌反应本机
【发布时间】：2019-12-03 03:05:35
【问题描述】：

包

npm install --save react-native-calendar-select

源代码：

import React, { Component } from 'react';
import ActionButton from 'react-native-action-button';
import Icon from 'react-native-vector-icons/Ionicons';
import { StyleSheet, Text, View } from 'react-native';
import Calendar from 'react-native-calendar-select';


class YourComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            startDate: new Date(2017, 6, 12),
            endDate: new Date(2017, 8, 2)
        };
        this.confirmDate = this.confirmDate.bind(this);
        this.openCalendar = this.openCalendar.bind(this);
    }
    // when confirm button is clicked, an object is conveyed to outer component
    // contains following property:
    // startDate [Date Object], endDate [Date Object]
    // startMoment [Moment Object], endMoment [Moment Object]
    confirmDate({ startDate, endDate, startMoment, endMoment }) {
        this.setState({
            startDate,
            endDate
        });
    }
    openCalendar() {
        this.calendar && this.calendar.open();
    }
    // in render function
    render() {
        // It's an optional property, I use this to show the structure of customI18n object.
        let customI18n = {
            'w': ['', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
            'weekday': ['', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
            'text': {
                'start': 'Check in',
                'end': 'Check out',
                'date': 'Date',
                'save': 'Confirm',
                'clear': 'Reset'
            },
            'date': 'DD / MM'  // date format
        };
        // optional property, too.
        let color = {
            subColor: '#f0f0f0'
        };
        return (
            <View>
                <Button title="Open Calendar" onPress={this.openCalendar} />
                <Calendar
                    i18n="en"
                    ref={(calendar) => { this.calendar = calendar; }}
                    customI18n={customI18n}
                    color={color}
                    format="YYYYMMDD"
                    minDate="20170510"
                    maxDate="20180312"
                    startDate={this.state.startDate}
                    endDate={this.state.endDate}
                    onConfirm={this.confirmDate}
                />
            </View>
        );
    }

当我运行它时，我得到了这个错误这是网站的原始代码，我找不到问题出在哪里

它是一个日历日期选择器，我从npm website复制了原始代码并将代码放在一个类类组件中

请你帮我解决它！

【问题讨论】：

这是一个语法错误。发布整个代码。
@hongdeveloper 你好，我贴出完整代码reference
您的代码中缺少最后一个 '}'。

标签： reactjs react-native npm

【解决方案1】：

这里有两个错误的地方，一是你没有导入Button，二是你复制了示例代码，但是它并没有显示所有代码，只有构造函数和渲染，所以试试下面的代码。

import React, { Component } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import Calendar from 'react-native-calendar-select';


class YourComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            startDate: new Date(2017, 6, 12),
            endDate: new Date(2017, 8, 2)
        };
        this.confirmDate = this.confirmDate.bind(this);
        this.openCalendar = this.openCalendar.bind(this);
    }
    // when confirm button is clicked, an object is conveyed to outer component
    // contains following property:
    // startDate [Date Object], endDate [Date Object]
    // startMoment [Moment Object], endMoment [Moment Object]
    confirmDate({ startDate, endDate, startMoment, endMoment }) {
        this.setState({
            startDate,
            endDate
        });
    }
    openCalendar() {
        this.calendar && this.calendar.open();
    }
    // in render function
    render() {
        // It's an optional property, I use this to show the structure of customI18n object.
        let customI18n = {
            'w': ['', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
            'weekday': ['', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
            'text': {
                'start': 'Check in',
                'end': 'Check out',
                'date': 'Date',
                'save': 'Confirm',
                'clear': 'Reset'
            },
            'date': 'DD / MM'  // date format
        };
        // optional property, too.
        let color = {
            subColor: '#f0f0f0'
        };
        return (
            <View>
                <Button title="Open Calendar" onPress={this.openCalendar} />
                <Calendar
                    i18n="en"
                    ref={(calendar) => { this.calendar = calendar; }}
                    customI18n={customI18n}
                    color={color}
                    format="YYYYMMDD"
                    minDate="20170510"
                    maxDate="20180312"
                    startDate={this.state.startDate}
                    endDate={this.state.endDate}
                    onConfirm={this.confirmDate}
                />
            </View>
        );
    }
}

【讨论】：

我试过了，但我仍然遇到同样的“不变违规”错误
@Venda，我在零食中做，是正确的。看到这个链接（snack.expo.io/@rns/calendar），你应该重新加载项目。
@Venda，你不用icon，请删除。可能是你的react-native-vector-icons 不是链接

【解决方案2】：

当您错过结束括号或多余的括号时，会产生这种类型的错误，因此请按 ctrl+shift+f 以可视化代码格式化代码以查看缺少的括号。

【讨论】：

【解决方案3】：

您遇到了语法错误，因为您缺少最后一个“}”。只需检查您的代码：您打开和关闭您的渲染方法，但您的类仍然打开。

您还导入 ActionButton 但只使用 Button。

完整的代码应该是这样的：

import React, { Component } from 'react';

import ActionButton from 'react-native-action-button';
import Icon from 'react-native-vector-icons/Ionicons';
import { StyleSheet, Text, View } from 'react-native';
import Calendar from 'react-native-calendar-select';


class YourComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: new Date(2017, 6, 12),
      endDate: new Date(2017, 8, 2)
    };
    this.confirmDate = this.confirmDate.bind(this);
    this.openCalendar = this.openCalendar.bind(this);
  }

  // when confirm button is clicked, an object is conveyed to outer component
  // contains following property:
  // startDate [Date Object], endDate [Date Object]
  // startMoment [Moment Object], endMoment [Moment Object]
  confirmDate({startDate, endDate, startMoment, endMoment}) {
    this.setState({
      startDate,
      endDate
    });
  }

  openCalendar() {
    this.calendar && this.calendar.open();
  }

  // in render function
  render() {
    // It's an optional property, I use this to show the structure of customI18n object.
    let customI18n = {
      'w': ['', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
      'weekday': ['', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
      'text': {
        'start': 'Check in',
        'end': 'Check out',
        'date': 'Date',
        'save': 'Confirm',
        'clear': 'Reset'
      },
      'date': 'DD / MM'  // date format
    };
    // optional property, too.
    let color = {
      subColor: '#f0f0f0'
    };
    return (
      <View>
        <ActionButton
          buttonColor="rgba(231,76,60,1)"
          onPress={this.openCalendar}
        />
        <Calendar
          i18n="en"
          ref={(calendar) => {this.calendar = calendar;}}
          customI18n={customI18n}
          color={color}
          format="YYYYMMDD"
          minDate="20170510"
          maxDate="20180312"
          startDate={this.state.startDate}
          endDate={this.state.endDate}
          onConfirm={this.confirmDate}
        />
      </View>
    );
  }
}

【讨论】：

**Invariant Violation: Element type is invalid: 期望字符串（用于内置“组件）或类/函数（用于复合组件）但得到：对象。您可能忘记导出您的组件中定义它的文件，或者您可能混淆了默认和命名导入。”我明白了，你能帮忙吗
您导入了 ActionButton，但您在 render 方法中只使用了一些未知的 Button 组件。考虑用 ActionButton 替换 Button。
@Venda 我更新了答案，所以你可以复制代码。