javascript - 在 React 中使用第 3 方组件

Question

我是 React 的菜鸟，并且有点迷失了。我正在一个 .jsx 文件中创建我的 React，并在该文件上运行 grunt-babel，然后通过 grunt-uglify 将其与 React.js 和 React-dom.js 连接起来(按设定的顺序)，最后输出单个然后文件被添加到我的 html 中。

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

我找到了一个看起来可以完成这项工作的第 3 方组件 ( https://github.com/SimonErich/react-paginatr )。现在我的问题是我不知道如何在我的工作流程中实际使用它。我尝试过各种其他第三方组件，但也不知道如何让它们工作。

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

Uncaught 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我发现它的语法更好。所有这些工具将帮助您将每个组件保存在单独的文件中，并且它们将允许您直接引用和使用它们(或第 3 方组件)。

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