Question

我想知道是否可以更新组件，例如进度条，而另一个组件正在渲染，而渲染时我会发出事件以更新我的进度条，但是React在应用所有更新之前等待组件完成加载我的进度条在队列中。

详细说明我有一个组件可以呈现10个子组件，在每个子组件中，我发出一个事件，我的进度条接收到该事件，但只有在渲染了所有10个子组件时才会启动setstates。我有点失落，我不知道是否可以做到

在这里，我尝试将我的代码说清楚：

在ProductView渲染中：

return (
            <div>

                <Col className="config_tabs" xs={12} lg={12} sm={12} md={12}>

                    <CustomProgressBar/>

                    <TabbedAreaView {...this.props} style={{display:this.state.display_form}} ref="TabbedArea"
                        product={product}
                        product_id={this.props.params.id}
                        hideForm={this.hideForm}
                        version={product.version}
                    />
                    <br/>

                    {formError}

                    {success}

                    <Button bsStyle='primary' bsSize='small' onClick={this.returnToList}>
                        <Glyphicon glyph='arrow-left'  /> Retour à la liste des produits" +
                    </Button>


                </Col>



            </div>

        );
    })

在CustomProgressBar中：

var CustomProgressBar = React.createClass({
  displayName: 'CustomProgressBar',
  getDefaultProps: function() {
    return {
    };
  },

  getInitialState(){
      return {progress:0}
  },

  _onFormTabLoaded(){

        this.progress = this.progress+100/8
        this.setState({progress:this.progress })

        console.log(this.progress)



    },


  componentDidMount: function() {
      this.progress = 0;
      FormStore.addFormTabLoadedListener(this._onFormTabLoaded);

  },
  render: function() {
      return (<ProgressBar ref='bar' now={this.state.progress}/>)
  }
});


export default CustomProgressBar;

在tabbedAreaView中我渲染：

        var i = 0;
        for (var group in params ) {

            var parameters = params[group]
            var pc = <ProductConfig
                {...this.props}
                step={i+1}
                //config_id={configs.id}
                key={'pconf'+i}
                ref={'form'+i}
                nextStep={this.nextStep}
                previousStep={this.previousStep}
                config_schema={config_schema[group]}
                disableTabs = {this.disableTabs}
                activateTabs = {this.activateTabs}

                group={group}

                output='form'
                params={parameters}

                form_validated = {this.form_validated}
                form_unvalidated = {this.form_unvalidated}

                nb_forms={_.size(params)}
                submitForms = {this.submitForms}

                storage_key={storage_key}
                //config_id={config.id}
                action={this.state.action}
            />

            tabpanes.push(<Tab disabled={this.state.disabled} key={'tab'+i} ref={"tab"+i} eventKey={i} title={group}>{pc}</Tab>)
            i++
        }


        var tabbedAreaInstance = (

                <Panel bsStyle='info'>
                      <Tabs
                        bsStyle="pills"
                        ref="TabbedArea"
                        onSelect={this.handleSelect}
                        DefaultActiveKey={0}
                        animation={false}
                        readOnlyConfig={this.props.readOnlyConfig}>
                            {tabpanes}
                      </Tabs>
                      {display_confirm}
                      {actionButtons}
                 </Panel>
        );

return (
            <div>

                <h3>{text_header}</h3>
                <Row>
                    <Col className="config_tabs" xs={10} lg={8} sm={7} md={8}>

                        {tabbedAreaInstance}
                        {/*
                        <Pager>
                            {buttonPrevious}
                            {buttonNext}
                        </Pager>
                        */}


                        {formError}




                    </Col>
                </Row>

            </div>
        );

在ProductConfig中，我发出事件：

componentDidMount() {
        FormStore.emitFormTabLoaded()

然后所有这些自定义栏都在加载所有产品配置时工作，所以它不感兴趣：）

setState是一个组件，而另一个是渲染

0 个答案: