0

由于以下错误，我的应用程序无法编译：

./src/App.js
Syntax error: Unexpected token (12:2)

  10 | class App extends Component {
  11 | 
> 12 |   <StyleRoot>
     |   ^
  13 |         <AppContent />
  14 |   </StyleRoot>
  15 |

我的应用程序分为 App.js 和 AppContent.js。我认为这可能是一种在 StyleRoot 中包装我的应用程序的可行方法。

应用程序.js

import React, { Component } from 'react';
import Radium from 'radium';
import {StyleRoot} from 'radium';
import AppContent from './AppContent.js';


class App extends Component {

  <StyleRoot>
        <AppContent />
  </StyleRoot>

}

export default App;

应用内容.js

import React, { Component } from 'react';
import axios from 'axios';
import Radium from 'radium';

import Title from './Title.js'

import {fadeInDown} from 'react-animations';



const styles = {
  appContent: {
    textAlign: 'center'
  },
  fadeInDown: {
    animation: 'x 1s',
    animationName: Radium.keyframes(fadeInDown, 'fadeInDown')
  },
  quoteBox: {
    margin: '0 auto',
    padding: '50px',
    maxWidth: '25%',
    minHeight: '200px',
    backgroundColor: 'aquamarine'
  },
  quoteAuthor: {
    backgroundColor: 'orange',
    textAlign: 'right',
    height: '15%',
    marginTop: '50px'
  }
}


class AppContent extends Component {
  constructor() {
    super();
    this.state = {
      quote: '',
      quoteAuthor: ''
    };
    this.getRandomQuote = this.getRandomQuote.bind(this);
  }

  getRandomQuote() {
    return axios.get('https://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json')
      .then((response) => {

        console.log(response);
        var author;


          (response.data.quoteAuthor === "") ?  author = "Anonymous" : author = response.data.quoteAuthor;
          this.setState( {quote: response.data.quoteText, quoteAuthor: author} );

      })
      .catch(function (error) {
        console.log(error);
      });
  }


  render() {
    return (
        <div className="App" style={ styles.app }>
          <Title words="Quote Machine"/>
          <div className="quote-box" style={ styles.quoteBox }>
            <h2 className="quote-text" style={ styles.fadeInDown }>{ this.state.quote }</h2>
            <h3 className="quote-author" style={ styles.fadeInDown, styles.quoteAuthor }>{ this.state.quoteAuthor }</h3>
          </div>
          <button className="" onClick={ this.getRandomQuote }>Retrieve A Quote</button>
        </div>
    );
  }
}

AppContent = Radium(AppContent);

export default AppContent

这是我第一次使用 Radium，我不明白为什么第 12 行被视为错误。

4

1 回答 1

1

您需要渲染/返回，以便渲染组件。：

class App extends Component {
render(){
return (
  <StyleRoot>
        <AppContent />
  </StyleRoot>
   )
  }

}
于 2017-09-13T03:42:37.520 回答