2
反応コンポーネントライブラリを作成しようとしていますので、アプリケーション全体を通して使用できます。私は図書館の最初の部分をテーブルにしていますが、これはまだテスト段階ですが、コンポーネントを呼び出して呼び出されたページでそのコンポーネントを作成する方法を理解できません。現在のところ、これはその動作方法です。私はまた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>
は、その後、私は私のコンポーネントを反応させてきました。
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);
そして、私はHTMLに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);
を削除したいです/ 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);
作品は正常に動作しているが、私はHTMLページにReactDom.rendersを削除した場合、私は実際にそれに部品を入れています最初の方法は、コンポーネントの表が存在しないことを言います。とにかく、後でこのアプリケーションを実行するには、テーブルを持っているときにtable.jsのコンポーネントをインポートしてソースとそこに接続するだけです。私はここで他の答えを見てきましたが、主にユーザビリティのデータを扱っているようです。
これはモジュールが定義されていないことを示しています。他のプラグインやインストールが必要なものはありますか？ –
まあ、ブラウザはJSXをサポートしていないので、webpackまたはbrowserifyのいずれかを使用する必要があります。良いチュートリアルのリンクhttps://www.codementor.io/reactjs/tutorial/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack –
素晴らしいことができました！ –