0
私はリアクトのノブであり、少し失われてしまいました。私はgrunt-babelを実行する.jsxファイルで自分の反応を作成しています。これはgrunt-uglifyを使ってreact.jsとreact-dom.js（設定された順序で）を連結し、最後に出力しますファイルは私のhtmlに追加されます。サードパーティのコンポーネントをリアクトで使用する
私は反応を使ってテーブルを作成しています。私はテーブルのデータの配列を渡しますが、配列をスプライスしてページを設定したいと思います。
私は仕事をするようなサードパーティのコンポーネント（https://github.com/SimonErich/react-paginatr）を見つけました。今私の問題は、ワークフローでこれを実際にどのように使用するのか分かりません。私は他のさまざまなサードパーティ製のコンポーネントを試して、それらを動作させる方法を知らない。
私は単純に反応した後、私のuglifyコマンドにLIBSのフォルダにコンパイルさPaginatrComponent.jsのPaginatrMixin.jsを追加し、反応-DOMをした場合、私は、コンソール
キャッチされないにReferenceErrorでこれを取得する：モジュールが反応で定義されていません。 min.js：8320
私は何か完全に間違っていますか？私はCommonJsとWebpackとBrowserifyへの参照をしている人々を見ていますか？しかし、彼らが何をしているか、ワークフローにどのように適合するかはわかりません。
私のコードはここにhttp://codepen.io/rmaspero/pen/LxQNYY codepenである：
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'));