Ich bin ein Neuling bei React und habe mich ein wenig verloren. Ich erstelle meine Antwort in einer .jsx-Datei, die ich grunt-babel benutze, diese wird dann durch grunt-uglify geschickt, um sie mit react.js und react-dom.js (in einer festgelegten Reihenfolge) zu verketten und schließlich die einzige Ausgabe Datei wird dann zu meinem HTML hinzugefügt.Verwenden von 3rd-Party-Komponenten in React
Ich benutze reagieren, um eine Tabelle zu erstellen. Ich übergebe ein Array von Daten für die Tabelle, aber dann möchte ich das Array spleißen und paginieren.
Ich habe eine Komponente von Drittanbietern gefunden, die aussieht, als ob sie den Job erledigt (https://github.com/SimonErich/react-paginatr). Jetzt ist mein Problem, dass ich nicht weiß, wie man das mit meinem Workflow wirklich benutzt. Ich habe verschiedene andere 3rd-Party-Komponenten ausprobiert und weiß auch nicht, wie man sie zur Arbeit bringt.
Wenn ich einfach den kompilierten PaginatrComponent.js PaginatrMixin.js im libs Ordner auf meinen uglify Befehl hinzufügen, nachdem reagieren und reagieren-dom ich dies in der Konsole
Uncaught Reference: Modul ist nicht definiert, bei reagieren. min.js: 8320
Und mache ich etwas völlig falsch? Ich sehe Leute, die sich auf CommonJs und Webpack und Browserify beziehen? Aber ich bin mir nicht sicher, was sie tun oder wie sie in meinen Workflow passen würden.
Mein Code ist auf codepen hier 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'));