アプリを反応させるのラジウムは、アプリケーションコンポーネントに起因するStyleRootにコンパイルに失敗し

Question

を使用して私のアプリは、次のエラーに基づいてコンパイルに失敗しました：

./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で私のアプリをラップするために実行可能な方法であれば、これがちょっとしたことかもしれないと決めました。

App.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; 

AppContent.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 

これはラジウムを使用して私の最初の時間であり、ライン12はエラーとはみなされている理由を私は理解していません。

Answer 1

あなたはそれがコンポーネントを描画するように、/リターンレンダリングする必要があります。：

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

}