Как устранить неожиданную ошибку токена при импорте ChatBot в React Native Web app

Question

Я создаю веб-приложение chatbot с использованием React-Native.Я новичок в реакции-родной.Если у кого-то есть идеи по этому вопросу, пожалуйста, дайте мне знать, где я неправ.

Я использую эту библиотеку - https://github.com/LucasBassetti/react-native-chatbot

Я выполняю следующие шаги - https://www.youtube.com/watch?v=u5A70BUygUE

Я получаю ошибку -

./node_modules/react-native-chatbot/lib/ChatBot.js
SyntaxError: /Users/anil/Documents/myApp/node_modules/react-native-chatbot/lib/ChatBot.js: Unexpected token (426:8)

  424 |     if (component && !asMessage) {
  425 |       return (
> 426 |         <CustomStep
      |         ^
  427 |           key={index}
  428 |           delay={customDelay}
  429 |           step={step}

Вот мой код -

import React, { Component } from 'react';
import ChatBot from 'react-native-chatbot' 
import {
  StyleSheet,
 // Text,
  View,

} from 'react-native';

const steps = [
  {
    id: '0',
    message: 'Welcome to react chatbot!',
    trigger: '1',
  },
  {
    id: '1',
    message: 'Bye!',
    end: true,
  },
];

const styles = StyleSheet.create({
  container: {
    flex: 1,
  //  backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },

  text:{
    fontSize : 25
  }
});

export default class App extends Component {

  render() {

     return (
      <View style={styles.container}>

        <ChatBot steps={steps} />
      </View>
    );
  }
}

Это добавленные зависимости -

  "dependencies": {
    "react": "^16.6.x",
    "react-app-polyfill": "^0.1.3",
    "react-art": "^16.6.x",
    "react-dom": "^16.6.x",
    "react-http-request": "^2.0.0",
    "react-native": "^0.60.5",
    "react-native-chatbot": "0.0.1-alpha.12",
    "react-native-web": "^0.10.x",
    "styled-components": "^4.3.2"
  },

Спасибо.

Answer 1

Я полагаю, что это не реакция, а обычная ошибка в JavaScript.В следующем примере вы пытаетесь вернуть некоторый HTML-код в функцию javascript.

  render() {

     return (
      <View style={styles.container}>   // <View> is a HTML/XML tag/keyword

        <ChatBot steps={steps} />
      </View>
    );
  }

Я считаю, что эти теги не являются частью синтаксиса java-скрипта, и вам нужно вместо этого возвращать их в виде строки.Должно работать что-то вроде следующего.

  render() {

     return (
      `<View style={styles.container}>

        <ChatBot steps={steps} />
      </View>`
    );
  }

Надеюсь, это поможет.

Удачного кодирования!:)