node.js - react 中 如何使用 react-bootstrap?

Question

import {Button} from 'react-bootstrap';
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
import React from 'react';
import {render} from 'react-dom';
import TableList from './table.js';


class MianBan extends React.Component{
    //title
    constructor(...args){
        super(...args);
        this.state = {
            open: true
        };
    }

    render() {
        return (
          <p>
            <Button onClick={ ()=> this.setState({opten: !this.state.opten}) }>
                click
            </Button>
              <panel collapsible expanded={this.state.open}>
                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
                  Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
              </panel>
          </p>
        );
    }
}

module.exports = MianBan;

/**
 * Created by wf on 2016/3/29.
 */
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
import React from 'react';
import {render} from 'react-dom';

class TableList extends React.Component{

    constructor(props){
        super(props);
    }

    render() {
        var selectRowProp = {
            mode: 'checkbox',
            clickToSelect: turn
        };

        var products = [
            {
                id: 1,
                title: "为什么猪那么能吃",
                author: "kevin",
                createTime: "2016-03-25",
                clicks: 88,
                reads: 120
            },{
                id: 2,
                title: "为什么猪那么能吃",
                author: "kevin",
                createTime: "2016-03-25",
                clicks: 88,
                reads: 80
            },{
                id: 3,
                title: "为什么猪那么能吃",
                author: "kevin",
                createTime: "2016-03-25",
                clicks: 88,
                reads: 207
            },{
                id: 4,
                title: "为什么猪那么能吃",
                author: "kevin",
                createTime: "2016-03-25",
                clicks: 88,
                reads: 100
            },{
                id: 5,
                title: "为什么猪那么能吃",
                author: "kevin",
                createTime: "2016-03-25",
                clicks: 88,
                reads: 150
            },{
                id: 6,
                title: "为什么猪那么能吃",
                author: "kevin",
                createTime: "2016-03-25",
                clicks: 88,
                reads: 160
            }
        ];

        return (
            <BootstraTable data={products} insertRow={true} deleteRow={true} selectRow={true}>
                <TableHeaderColumn dataField='id' isKey={true}>操作</TableHeaderColumn>
                <TableHeaderColumn dataField='title' isKey={true}>文章标题</TableHeaderColumn>
                <TableHeaderColumn dataField='author' isKey={true}>作者</TableHeaderColumn>
                <TableHeaderColumn dataField='createTime' isKey={true}>创建时间</TableHeaderColumn>
                <TableHeaderColumn dataField='clicks' isKey={true}>点击数</TableHeaderColumn>
                <TableHeaderColumn dataField='reads' isKey={true}>阅读数</TableHeaderColumn>
            </BootstraTable>
        );
    }
}

module.exports = TableList;

下面这是入口文件，指向页面的id='table' 我编译之后，页面不显示。是什么原因？

import React from 'react';
import {render} from 'react-dom';
import Panel from '../news/news_table/panel.js';



render(
    <MianBan />,
    document.getElementById('table')
);

Answer 1

你不 import MianBan from '..' 不引入这个 class 直接使用真的好么……