0
ボタンを押すと、反応成分を動的に追加しようとしていますが、今はjQueryを使用していますが、コードは大変です。主な考え方は、私が <Button onClick={this.addProcess} data-mode="Hadoop"><Icon name="plus"/></Button> を押すとプロセスがサーバーに接続されます。これはすべてのロジックを持っているonClick={this.addProcess}によって処理されます。追加反応コンポーネント
私のjQueryを使用してコード：
var React = require('react');
var ReactDOM = require('react-dom');
var {Icon} = require('react-fa');
var moment = require('moment');
var TimeAgo = require('react-timeago')
var {
ButtonGroup,
DropdownButton,
MenuItem,
Button,
Grid,
Row,
Col
} = require('react-bootstrap');
var ServerCanvas = React.createClass({
addProcess: function(event) {
// console.log(event.currentTarget.dataset.mode)
var process = event.currentTarget.dataset.mode;
var processDiv;
switch (process) {
case "Hadoop":
processDiv = ` <div class="Grid-cell Grid" style="flex-flow: column nowrap; background: linear-gradient(135deg, rgb(244, 143, 177) 0%, rgb(194, 24, 91) 100%);">
<div class="Grid-cell" style="font-size: 150%;">Hd</div>
<div class="Grid-cell" style="font-size: 75%;">Hadoop</div>
<div class="Grid-cell" style="font-size: 75%; color: rgb(0, 0, 0);">
</div>
</div>`;
break;
default:
}
var server = $('#servers').find('.test').not('.complete').first();
if (server.children().length < 3) {
server.append(processDiv); ///Append the new process
if (server.first().children().length === 3) {
server.addClass('complete');
}
}
},
render: function() {
return (
<div className="">
<Grid className="no-margin-padding container-hack">
<Row>
<Col md={4} className='grey-box'>
<Row className="rowHeight">
<Col md={6} className='text-center rowButton_Mid_Height'>
<div className="pull-right">
<Button bsClass='btn btn-default btn-lg btn-round' onClick={this.addServer}><Icon name="plus"/></Button>
<div>Add server</div>
</div>
</Col>
<Col md={6} className='text-center rowButton_Mid_Height'>
<div className="pull-left">
<Button bsClass='btn btn-default btn-lg btn-round' onClick={this.removeServer}><Icon name="minus"/></Button>
<div>Destroy Server</div>
</div>
</Col>
</Row>
</Col>
<Col md={8} className='black-box'>
<h1>Server Canvas</h1>
<div id='servers' className="serverContainer">
<div className="test grey-box">
<div className='text-center'>Server 0</div>
</div>
</div>
</Col>
</Row>
<Row>
<Col xs={4} md={4} className=''>
<Row>
<Col xs={12} md={12} className=''>
<div>
<div className='HadoopBackground pull-left'>
</div>
Hadoop
<div className='pull-right'>
<Button bsClass='btn btn-default btn-xs btn-round HadoopBackgroundButton'><Icon name="minus"/></Button>
<Button bsClass='btn btn-default btn-xs btn-round HadoopBackgroundButton' onClick={this.addProcess} data-mode="Hadoop"><Icon name="plus"/></Button>
</div>
</div>
</Col>
</Row>
</Col>
</Row>
</Grid>
</div>
)
}
});
ReactDOM.render(
<ServerCanvas/>, document.getElementById('app'));
しかし、私は他の反応成分を（次のコードで名前のプロセス）を作成し、私はボタンを押すとaddProcessは、プロセスコンポーネントを挿入発射されるとされて探していますということ（いくつかのコードが削除された）：あなたが状態の配列として、現在のサーバーを表現するために小さな調整を行う場合
var Process = React.createClass({
render: function() {
return (
<div className="Grid-cell Grid">
<div className="Grid-cell" >Hd</div>
<div className="Grid-cell" >Hadoop</div>
<div><time className='loaded timeago'></time></div>
<div className="Grid-cell" >
</div>
</div>
);
}
})
addProcess: function(event) {
// console.log(event.currentTarget.dataset.mode)
var process = event.currentTarget.dataset.mode;
var processDiv;
var server = $('#servers').find('.test').not('.complete').first();
if (server.children().length < 3) {
console.log('puedo crear hijos');
server.append(<Process />); //Add the new process but nothing happend.
if (server.first().children().length === 3) {
server.addClass('complete');
}
}
}