Question

我目前通过componentDidMount支持我的用例。它工作了一次渲染。但很快我不得不重新渲染组件，即再次构建行和列，因此重新应用marginLeft样式（在componentDidMount中）。我不知道该怎么做？

以下是所关注组件的代码。子图组件是一个纯粹的表示组件（读取无状态）。

var React = require('react');
var ReactDOM = require('react-dom');
var Graph = require('./graph');
var noOfLines, difference;
var _ = require('lodash');

module.exports = React.createClass({
    displayName: 'Rules graph container',
    propTypes: {
        data: React.PropTypes.arrayOf(React.PropTypes.object),
        lineAttributes: React.PropTypes.object,
        handleNext: React.PropTypes.func,
        handlePrevious: React.PropTypes.func,
        pagination: React.PropTypes.object
    },
    getRows(n, d, lineHeight){
        var rows = [], columns = [];
        for (var i = n; i > 0; i--){
            var isLast = (i === 1);
            rows.unshift(
                <div key={i} className='y-line' style={{height: lineHeight, marginTop: isLast ? (lineHeight / 2) : 0}}>
                    <div className='amt'>{ d + d * (n - i) }</div>
                </div>
            );
        }
        return rows;
    },
    buildCols(leftMargins){
        const {data, lineAttributes} = this.props;
        var  cols = [];
        for ( var i = 0; i < data.length; i++){
            var height, isFirst;
            if (data[i].val === lineAttributes.maxValue){
                height = 100;
            } else {
                height = (data[i].val / lineAttributes.maxValue) * 100;
            }
            if (i === 0){
                isFirst = true;
            }
            const button = `column_button_${i}`, name = _.startCase(data[i].name);
            cols.push(
               <div key={i} className={ isFirst ? 'first active column' : 'column'} style={{ height: `${height}%`, top: `${100 - height}%`, marginRight: '100px' }}>
                   <div className='count'>{data[i].val}</div>
                   <div className='column_button' style={{marginLeft: leftMargins && -leftMargins[i]}} ref={node => this[button] = node}><span className='event_label'>{name}</span></div>
               </div>
            );
        }
        return cols;
    },
    render(){
        const {noOfLines: n, difference: d, lineHeight} =  this.props.lineAttributes;
        const rows = this.getRows(n, d, lineHeight), cols = this.buildCols();
        return (
            <div>
            {n ? (
                <Graph rows={rows} graphHeightPad={lineHeight / 2} cols={cols} pagination={this.props.pagination} />
            ) : null}
            </div>
        );
    },
    componentDidMount(){
        const leftMargins = [];
        for (var i = 0; i < this.props.data.length; i++){
            var button = `column_button_${i}`;
            var width = this[button].offsetWidth;
            leftMargins.push(width / 4);
        }
        const cols = this.buildCols(leftMargins);
        this.setState({cols}); // Intentional re-render
    }
});

Answer 1

我知道你想在重新渲染时调用相同的函数那么componentDidUpdate（）

呢

do(){
    const leftMargins = [];
    for (var i = 0; i < this.props.data.length; i++){
        var button = `column_button_${i}`;
        var width = this[button].offsetWidth;
        leftMargins.push(width / 4);
    }
    const cols = this.buildCols(leftMargins);
    this.setState({cols}); // Intentional re-render
}

componentDidMount(){ this.do(); }

componentDidUpdate(){ this.do(); }

渲染后动态设置样式 - 反应

1 个答案: