追加反应成分

Question

我试图在按下按钮时将动态的React组件添加到其他的React组件中，现在我正在使用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'>
                                            &nbsp;
                                        </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'));

但是我要寻找的是创建其他react组件（在下面的代码中命名为Process），当我按下按钮并addProcess ，插入Process组件（某些代码已删除）：

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');
        }
    }
}

Answer 1

如果进行一些小的调整以将当前服务器表示为处于状态的阵列，则可以遍历已添加的所有服务器。 这是一个简化的版本，以演示您可能如何进行：

var ServerCanvas = React.createClass({
    // represent servers in state
    getInitialState: function() {
        return {
            servers: []
        }
    },
    // add new server to state
    addService: function(event) {
        this.setState({
            servers: this.state.servers.concat(event.currentTarget.dataset.mode)
        });
    },
    render: function() {
        return (
            <div>
                <h3>Servers</h3>
                <div className="servers">
                    {this.state.servers.map(function(server) {
                        return (
                            <div className="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: 75%;">{server}</div>
                                <div class="Grid-cell" style="font-size: 75%; color: rgb(0, 0, 0);">
                                </div>
                           </div>
                        )
                    })}
                </div>
            </div>
        )
    }
})

您还可以将服务器拆分为自己的组件：

var Server = React.createClass({
    render: function() {
        return (
            <div className="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: 75%;">{this.props.serviceName}</div>
                <div class="Grid-cell" style="font-size: 75%; color: rgb(0, 0, 0);">
                </div>
           </div>
        )
    }
})

并将ServerCanvas渲染更改为：

{this.state.servers.map(function(server) {
    return <Server serviceName={server} />;
})}

Answer 2

您应该创建一个单独的组件并将其导入文件中，例如ProcessComponent。

要添加多个姿态，您应该在状态中包含一个该组件的数组，因此当您需要添加另一个组件时，只需将一个值推入State中具有的该数组，然后使用setState处理渲染和更新。

这样的渲染：

render() {
    var self = this;
    //This "self" here is because inside the loop below, the "this" context is going to be Jquery and not your Class. So you keep it in a separated value just for refence purpose. Like passing a callBack as in the example.
    var processComponent = this.state.processOnState.map(function(item, i) 
    {
        return (
                <Process key={"process"+i} ref={"process"+i} anyCallback={self.callBackMethodForParent.bind(self)} dataForProcess={item.dataToComponent} />
                );
    }.bind(this));
return (
 <div>
      <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>
                 {processComponent}
           </div>
      </Col>
 </div>
)

因此，一旦您更新了数据，就可以使用以下方法触发更新：

setState({processOnState:[{dataToComponent:1},{dataToComponent:2}]})

默认情况下，react应该始终处理所有渲染和更新，它具有贯穿DOM的逻辑，找出发生了什么变化，然后重新渲染它。 您可以通过使用setState来触发此行为，这就是重点。

参考： https : //facebook.github.io/react/docs/component-api.html#setstate