三、React comp组合组件

在app下的comment文件夹下面分别新建CommentList.js 和 CommentForm.js

CommentList.js

'use strict'

import React from 'react';
class CommentList extends React.Component{
    render() {
        return(
            <div>评论列表</div>
        );
    }
}

export {CommentList as default}//导出

CommentForm.js

'use strict'

import React from 'react';
class CommentForm extends React.Component{
    render() {
        return(
            <form className="ui reply form">
                <div className="field">
                    <input type="text" placeholder="姓名"/>
                </div>
                <div className="field">
                    <textarea placeholder="评论"></textarea>
                </div>
                <button type="submit" className="ui blue button">
                    添加评论
                </button>
            </form>
        );
    }
}

export {CommentForm as default}//导出CommentForm

然后进入到CommentBox.js

引入CommentList.js 和 CommnetForm.js

import CommentList from './CommentList';
import CommentForm from './CommentForm';

'use strict'

import React from 'react';
import CommentList from './CommentList';
import CommentForm from './CommentForm';

class CommentBox extends React.Component{
    render() {
        return (
            <div className="ui comments">
                <h1>评论</h1>
                <div className="ui divider"></div>
                <CommentList/>
                <CommentForm/>
            </div>
        );
    }
}


export {CommentBox as default}

刷新页面