无法从“ node_modules \ react-simple-chatbot”解析“样式化的组件”

时间:2019-03-24 17:02:57

标签: reactjs react-native chatbot styled-components

我正在尝试使用expo cli运行我的react应用程序,并在构建bundle.js时遇到以下错误。

以下是我的App.js:

import React, { Component } from 'react';
import ChatBot from 'react-simple-chatbot';

let withTextToSpeech = [
  {
    id: '1',
    component: <TextToSpeech msg="Hi" />,
    trigger: '2',
  },
  {
    id: '2',
    user: true,
    trigger: '3',
  },
  {
    id: '3',
    component: <TextToSpeech msg='What is your name?' />,
    trigger: '4',
  },
  {
    id: '4',
    user: true,
    trigger: '5',
  },
  {
    id: '5',
    component: <TextToSpeech msg = 'Nice to meet you!' />,
    trigger: 6,
  },
  {
    id: '6',
    component: <TextToSpeech msg='How can i help you?' />,
    trigger: 'search',
  },
  {
    id: 'search',
    user: true,
    trigger: '7',
  }
]

let withoutTextToSpeech = [
  {
    id: '1',
    message: 'hi',
    trigger: '2',
  },
  {
    id: '2',
    user: true,
    trigger: '3',
  },
  {
    id: '3',
    message: 'What is your name?',
    trigger: '4',
  },
  {
    id: '4',
    user: true,
    trigger: '5',
  },
  {
    id: '5',
    message: 'Hi {previousValue}, nice to meet you!',
    trigger: 6,
  },
  {
    id: '6',
    message: 'How can i help you?',
    trigger: 'search',
  },
  {
    id: 'search',
    user: true,
    trigger: '7',
  }
]



class App extends Component {

  constructor( props ){
    super( props )

    this.state= {
      textToSpeech: true,
      steps : withTextToSpeech,
      sessionId: sessionId
    }
    withTextToSpeech.push(ChatMessageElement)
    withoutTextToSpeech.push(ChatMessageElement)
  }

  render() {
    console.log(this.state.textToSpeech)
    return (
      <div className="App">
        <ChatBot
          headerTitle="ChatBot"
          recognitionEnable={true}
          steps={this.state.textToSpeech ? withTextToSpeech : withoutTextToSpeech}
        />
      </div>
    );
  }
}

export default App;

我们将不胜感激。

2 个答案:

答案 0 :(得分:2)

您可以尝试以下方法:

React Child(string, React Component, HTML Element...)

答案 1 :(得分:0)

yarn add styled-components


import styled from 'styled-components'