什么是新反应版本的语法

时间:2018-04-28 17:24:10

标签: javascript node.js reactjs

伙计们,我想在App.js

index.js表格上打印一些组件

但是我一直发现模块没有发现错误,我注意到我的语法已经过时了,任何人都可以告诉我如何在新版本中执行此操作,这里是这段代码 我们在App.js上写什么来打印它们?

    var DATA = {    
    name: 'John Smith',
    imgURL: 'http://lorempixel.com/100/100/',
    hobbyList: ['coding', 'writing', 'skiing']
}
var App = React.createClass({
    render: function(){
        return (
            <div>
                <Profile 
                    name={this.props.profileData.name} 
                    imgURL={this.props.profileData.imgURL}/>
                <Hobbies
                    hobbyList={this.props.profileData.hobbyList} />
            </div>
        );
    }
});

1 个答案:

答案 0 :(得分:1)

在构建配置文件和爱好组件后,您还需要导入它们。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

const DATA = {    
    name: 'John Smith',
    imgURL: 'http://lorempixel.com/100/100/',
    hobbyList: ['coding', 'writing', 'skiing']
}
class App extends Component {
    render() {
        const { profileData: { name, imgURL, hobbyList } } = this.props;
        return (
            <div>
                <Profile 
                    name={name} 
                    imgURL={imgURL}/>
                <Hobbies
                    hobbyList={hobbyList} />
            </div>
        );
    }
}

ReactDOM.render(<App profileData={DATA} />, document.getElementById('root'));