Question

我是React的小伙子，让自己有点失落。我正在我运行grunt-babel的.jsx文件中创建我的反应，然后通过grunt-uglify将其与react.js和react-dom.js（按设定顺序）连接，最后输出单个然后将文件添加到我的html。

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

我发现第三方组件看起来会完成这项工作（https://github.com/SimonErich/react-paginatr）。现在我的问题是我不知道如何在我的工作流程中实际使用它。我尝试了其他各种第三方组件，并且不知道如何让它们工作。

如果我只是在libs文件夹中将已编译的PaginatrComponent.js PaginatrMixin.js添加到我的uglify命令中，并在反应和反应后将其在控制台中获取

未捕获的ReferenceError：在react.min.js：8320

中未定义模块

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

我的代码位于codepen http://codepen.io/rmaspero/pen/LxQNYY：

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'));

Answer 1

我认为你绝对应该使用像Webpack或Browserfy这样的工具。它们允许您打包项目，使文件的引用更容易。 This is good explanation about Webpack。我还要添加babel并使用React with ES6。 The official React docs are using ES6我发现它的语法方式更好。所有这些工具都可以帮助您将每个组件保存在一个单独的文件中，它们将允许您直接引用和使用它们（或第三方组件）。

您应该查看教程/样板文件。 This one looks pretty good to me但是那里有很多资源。

在React

1 个答案: