Javascript 在React中使用第三方组件

我是个反应迟钝的人，有点迷路了。我在运行grunt babel的.jsx文件中创建我的react，然后通过grunt uglify将其与react.js和react-dom.js（按设定顺序）连接起来，最后将单个输出的文件添加到我的html中

我正在使用react构建一个表。我为表传递了一个数据数组，但随后我想拼接该数组并对其进行分页

我发现了一个第三方组件，它看起来可以完成这项工作（）。现在我的问题是，我不知道如何在我的工作流程中实际使用它。我尝试过其他各种第三方组件，也不知道如何让它们工作

如果我只是在react和react dom之后将libs文件夹中编译好的PaginatrComponent.js PaginatrMixin.js添加到我的uglify命令中，我会在控制台中得到它

未捕获引用错误：未在react.min.js:8320处定义模块

我做错了什么？我看到人们引用CommonJs、Webpack和Browserify？但我不确定他们做了什么，或者他们如何适应我的工作流程

我的代码在这里的代码笔上：

var发票=[
{
国家：“处理”，
编号：“INV-31”，
客户：“Dael有限公司”，
总数：60000，
货币：“（英镑），
到期日：“5天”，
uri:“https://www.example.com/",
id:1，
},
{
声明：“拒绝”，
编号：“INV-765”，
客户：“Dael有限公司”，
总数：7430，
货币：“€”，
到期日：“30天”，
uri:“https://www.example.com/2",
id:2，
},
{
声明：“拒绝”，
编号：“INV-001”，
客户：“JB塔楼有限公司”，
总数：943，
货币：“（英镑），
到期日：“15天”，
uri:“https://www.example.com/3",
id:3，
},
{
声明：“草案”，
编号：“INV-043”，
客户：“JB塔楼有限公司”，
总数：72，
货币：“（英镑），
到期日：“10天”，
uri:“https://www.example.com/4",
id:4，
},
{
国家：“处理”，
编号：“INV-341”，
客户：“Dael有限公司”，
总数：3045，
货币：“（英镑），
到期日：“45天”，
uri:“https://www.example.com/5",
id:5，
},
{
国家：“处理”，
编号：“INV-501”，
客户：“JB塔楼有限公司”，
总数：453，
货币：“（英镑），
到期日：“65天”，
uri:“https://www.example.com/6",
id:6，
},
];
功能发票（道具）{
返回(
{props.state}
{props.number}
{props.customer}
{props.currency}{props.total}
{props.due}
);
}
发票类型={
onLink:React.PropTypes.func.isRequired，
}
函数表标题（）{
返回(
陈述
库存号。
顾客
全部的
应得的
);
}
功能表标题（道具）{
返回(
加工反应
第1页，共3页
);
}
TableTitle.propTypes={
on page:React.PropTypes.func.isRequired，
}
var Dashboard=React.createClass({
道具类型：{
行：React.PropTypes.number.isRequired，
startrow:React.PropTypes.number，
initialInvoices:React.PropTypes.arrayOf（React.PropTypes.shape({
状态：React.PropTypes.string.isRequired，
编号：React.PropTypes.string.isRequired，
客户：React.PropTypes.string.isRequired，
总计：React.PropTypes.number.isRequired，
货币：React.PropTypes.string.isRequired，
到期：React.PropTypes.string.isRequired，
id:React.PropTypes.number.isRequired，
})).要求，
},
getDefaultProps:function（）{
返回{
startrow:0，
}
},
getInitialState:函数（）{
返回{
发票：this.props.initialInvoices，
行：this.props.rows，
};
},
onPageUp:function（）{
this.state.invoices.slice（this.props.startrow+this.props.row，this.props.rows）；
},
onLinkClick:函数（uri）{
log（uri）；
window.location.href=（uri）；
},
render:function（）{
返回(
{this.state.invoices.slice（this.props.startrow，this.props.rows）.map（函数（发票，索引）{
返回(
);
}.bind（this））}
);
}
});
ReactDOM.render（，document.getElementById（'dashboard-processing__-table'）；

我认为你绝对应该使用像Webpack或Browserfy这样的工具。它们允许你打包你的项目，使文件的引用更容易。我还将添加和使用。我发现它的语法更好。所有这些工具将帮助您将每个组件保存在单独的文件中，并允许您直接引用和使用它们（或第三方组件）

您可能应该查看教程/样板。但是还有很多资源

var INVOICES = [
  {
    state: "processing",
    number: "INV-31",
    customer: "Dael ltd",
    total: 60000,
    currency: "£",
    due: "5 Days",
    uri: "https://www.example.com/",
    id: 1,
  },
  {
    state: "rejected",
    number: "INV-765",
    customer: "Dael ltd",
    total: 7430,
    currency: "€",
    due: "30 Days",
    uri: "https://www.example.com/2",
    id: 2,
  },
  {
    state: "rejected",
    number: "INV-001",
    customer: "JB Towers ltd",
    total: 943,
    currency: "£",
    due: "15 Days",
    uri: "https://www.example.com/3",
    id: 3,
  },
  {
    state: "draft",
    number: "INV-043",
    customer: "JB Towers ltd",
    total: 72,
    currency: "£",
    due: "10 Days",
    uri: "https://www.example.com/4",
    id: 4,
  },
  {
    state: "processing",
    number: "INV-341",
    customer: "Dael ltd",
    total: 3045,
    currency: "£",
    due: "45 Days",
    uri: "https://www.example.com/5",
    id: 5,
  },
  {
    state: "processing",
    number: "INV-501",
    customer: "JB Towers ltd",
    total: 453,
    currency: "£",
    due: "65 Days",
    uri: "https://www.example.com/6",
    id: 6,
  },
];

function Invoice(props) {
  return (
    <tr className='invoice-table--row' onClick={props.onLink}>
      <td className='invoice-table--cell invoice__state'><span className={"state__indicator indicator--" + props.state}></span><span className="state__text">{props.state}</span></td>
      <td className='invoice__number'>{props.number}</td>
      <td className='invoice__customer small-mobile-hide'>{props.customer}</td>
      <td className='invoice-table--cell'>{props.currency}{props.total}</td>
      <td className='invoice__due'>{props.due}</td>
    </tr>
  );
}

Invoice.propTypes = {
  onLink: React.PropTypes.func.isRequired,
}

function TableHeadings() {
  return (
    <thead>
      <tr className='invoice-table--header'>
        <th className='invoice-table--head invoice-head__state'>State</th>
        <th className='invoice-table--head'>Inv No.</th>
        <th className='invoice-table--head small-mobile-hide'>Customer</th>
        <th className='invoice-table--head'>Total</th>
        <th className='invoice-table--head invoice-head__due'>Due</th>
      </tr>
    </thead>
  );
}

function TableTitle(props) {
  return (
    <div className="section-divider">
      <h3 className="section-divider__title">Processing React</h3>
      <div className="paginate">
        <a className='paginate__button' href="#"><span className="icon icon--arrow icon--large arrow--previous" data-grunticon-embed></span></a>
        <span className="paginate__text">Page 1 of 3</span>
        <a className='paginate__button' onClick={props.onPage}><span className="icon icon--arrow icon--large" data-grunticon-embed></span></a>
      </div>
    </div>
  );
}

TableTitle.propTypes = {
  onPage: React.PropTypes.func.isRequired,
}

var Dashboard = React.createClass({
  propTypes: {
    rows: React.PropTypes.number.isRequired,
    startrow: React.PropTypes.number,
    initialInvoices: React.PropTypes.arrayOf(React.PropTypes.shape({
      state: React.PropTypes.string.isRequired,
      number: React.PropTypes.string.isRequired,
      customer: React.PropTypes.string.isRequired,
      total: React.PropTypes.number.isRequired,
      currency: React.PropTypes.string.isRequired,
      due: React.PropTypes.string.isRequired,
      id: React.PropTypes.number.isRequired,
    })).isRequired,
  },

  getDefaultProps: function() {
    return {
      startrow: 0,
    }
  },

  getInitialState: function() {
    return {
      invoices: this.props.initialInvoices,
      rows: this.props.rows,
    };
  },

  onPageUp: function() {
    this.state.invoices.slice(this.props.startrow + this.props.row, this.props.rows);
  },

  onLinkClick: function(uri) {
     console.log(uri);
     window.location.href = (uri);
  },

  render: function() {
    return (
      <div>
        <TableTitle onPage={function() {this.onPageUp()}.bind(this)}/>
        <table className='invoice-table'>
          <TableHeadings/>
          <tbody>
            {this.state.invoices.slice(this.props.startrow, this.props.rows).map(function(invoice, index) {
              return (
                <Invoice
                  state={invoice.state}
                  number={invoice.number}
                  customer={invoice.customer}
                  total={invoice.total}
                  currency={invoice.currency}
                  due={invoice.due}
                  key={invoice.id}
                  uri={invoice.uri}
                  onLink={function() {this.onLinkClick(invoice.uri)}.bind(this)}
                />
              );
            }.bind(this))}
          </tbody>
        </table>
      </div>
    );
  }
});

ReactDOM.render(<Dashboard initialInvoices={INVOICES} rows={3} totalRows={6} />, document.getElementById('dashboard-processing__table'));