我正在尝试制作一个 react 组件库,以便我可以在整个应用程序中使用它们。我的库的第一部分是一个表,这仍处于测试阶段,但我无法弄清楚如何调用该组件并在其调用的页面上创建它。目前这就是它的工作原理。我昨天也刚刚开始使用 React 编程。
HTML
<script type="text/babel" src="/js/reactcomponents/table.js"></script>
<div id="loadboardContainer">
<div class="table-desc">Future Loads</div>
<div id="futureLoadsContainer"></div>
<div class="table-desc">Todays Loads</div>
<div id ="todaysLoadsContainer"></div>
<div class="table-desc">Active Loads</div>
<div id ="activeLoadsContainer"></div>
</div>
然后我就有了我的 react 组件。
var Table = React.createClass({
getInitialState: function() {
return {
results: [],
columns: []
}
},
componentDidMount: function() {
this.serverRequest = $.get(this.props.source, function(result) {
result = JSON.parse(result);
if(result['resultRows'] == undefined){
result['resultRows'] = [];
}
this.setState({
results: result['resultRows'],
columns: $.makeArray(result['resultCols'])
});
}.bind(this));
},
componentWillUnmount: function(){
this.serverRequest.abort();
},
render: function() {
// Set array for rows.
var rows = [];
var header = [];
this.state.columns.map(function(cols) {
header.push(<TableColumns data={cols.cols} key={cols.id} />);
});
this.state.results.map(function(result) {
rows.push(<TableRow data={result.rows} key={result.id} />);
});
// Return the table.
return (
<table className="table table-condensed table-bordered no-bottom-margin">
<thead>
{header}
</thead>
<tbody>
{rows}
</tbody>
</table>
);
}
});
// Set up columns
var TableColumns = React.createClass({
render: function() {
var colNodes = this.props.data.map(function(col, i){
return (
<th key={i}>{col}</th>
);
});
return (
<tr>
{colNodes}
</tr>
);
}
});
// Set up row
var TableRow = React.createClass({
render: function() {
var rowNodes = this.props.data.map(function(row, i){
return (
<td key={i}>{row}</td>
);
});
return (
<tr>
{rowNodes}
</tr>
);
}
});
var futureContainer = document.getElementById('futureLoadsContainer');
var todaysContainer = document.getElementById('todaysLoadsContainer');
var activeContainer = document.getElementById('activeLoadsContainer');
ReactDOM.render(<Table source="/reactloadboard/react/getFutureTableValues.php" />, futureContainer);
ReactDOM.render(<Table source="/reactloadboard/react/getTodaysTableValues.php" />, todaysContainer);
ReactDOM.render(<Table source="/reactloadboard/react/getActiveTableValues.php" />, activeContainer);
当我将 table.js 文件导入到 html 时,这是有效的,但我希望它在组件使用中更加通用并删除
var futureContainer = document.getElementById('futureLoadsContainer');
var todaysContainer = document.getElementById('todaysLoadsContainer');
var activeContainer = document.getElementById('activeLoadsContainer');
ReactDOM.render(<Table source="/reactloadboard/react/getFutureTableValues.php" />, futureContainer);
ReactDOM.render(<Table source="/reactloadboard/react/getTodaysTableValues.php" />, todaysContainer);
ReactDOM.render(<Table source="/reactloadboard/react/getActiveTableValues.php" />, activeContainer);
在 html/php 页面中调用,如下所示。
<script type="text/babel" src="/js/reactcomponents/table.js"></script>
<div id="loadboardContainer">
<div class="table-desc">Future Loads</div>
<div id="futureLoadsContainer"></div>
<div class="table-desc">Todays Loads</div>
<div id ="todaysLoadsContainer"></div>
<div class="table-desc">Active Loads</div>
<div id ="activeLoadsContainer"></div>
</div>
var futureContainer = document.getElementById('futureLoadsContainer');
var todaysContainer = document.getElementById('todaysLoadsContainer');
var activeContainer = document.getElementById('activeLoadsContainer');
ReactDOM.render(<Table source="/reactloadboard/react/getFutureTableValues.php" />, futureContainer);
ReactDOM.render(<Table source="/reactloadboard/react/getTodaysTableValues.php" />, todaysContainer);
ReactDOM.render(<Table source="/reactloadboard/react/getActiveTableValues.php" />, activeContainer);
第一种工作方式工作正常,但如果我将 ReactDom.renders 删除到 html 页面,我实际上将组件放在上面,表明组件表不存在。无论如何,有没有办法做到这一点,所以稍后在应用程序中,当我有一个表时,我所要做的就是导入 table.js react 组件并连接源及其那里?我在这里查看了其他答案,但它们似乎主要处理数据的可用性。
最佳答案
为了在 HTML 中使用表格组件,您需要使用 module.exports
导出它,因为您没有使用 ES6 for React。
var Table = React.createClass({
...
});
var TableColumns = React.createClass({
...
});
var TableRow = React.createClass({
...
});
//Export the table component
module.exports = Table;
此外,浏览器不支持 JSX,因此您需要使用 webpack
或 browserify
来转译代码。
一个很好的教程链接 Webpack tutorial
关于javascript - 如何重用 react 表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39998143/