是否可以根据Reactjs中的实际布局html来操作组件？

Question

所以我觉得 React 将成为这项工作的错误工具（因为 React 非常关注单向流程），但我想我会问。

假设我有以下 HTML:

<div class="container">
    <div class="module">
        <div class="row">First Row</div>
        <div class="row">Second Row</div>
        <div class="row">Third Row</div>
    </div>
</div>

现在说容器class div有一个最大高度，只允许它显示第一行和第二行，导致第三个流溢出。

发生这种情况时，我想将溢出的行移动到一个新的容器中，所以我有以下输出：

<div class="container">
    <div class="module">
        <div class="row">First Row</div>
        <div class="row">Second Row</div>
    </div>
</div>
<div class="container">
    <div class="module">
        <div class="row">Third Row</div>
    </div>
</div>

没有 React，我计划通过将我的数据结构传递到 render() 调用中，在第一个代码示例中创建 html，然后遍历每个模块（然后是行）来做到这一点，找出底部像素值是否大于容器的最大高度，如果是，则重新渲染它。

我想在 Reactjs 中做到这一点，通过使每一行成为模块组件内的组件，但我不确定是否可以在 React 中有效地完成此操作。

Answer 1

要使其完全动态，将涉及计算容器的高度，以及在放置时逐行的总高度。当行的总高度超过容器的高度时，我们就知道有多少行适合一个容器，并且可以根据需要渲染尽可能多的容器，每个容器都有它可以处理的最大行数。

这可以在顶级（有状态）组件上使用回调来完成，此回调会向下传递到处理呈现各个行的组件，并在行组件安装后调用。回调然后进行所需的计算，然后使用新值更新应用程序的状态，指示每个容器要呈现的最大行数。

以下是其工作原理的粗略概述：

var App = React.createClass({

    getInitialState: function(){
        return {
           rowsToPlace: 1,
           maxRowsPerContainer: 1,
           calculateRows: true
        }
    },

    cb: function(){
        // passed down to Row component, handles calculating container/row heights
        // updates state as required
    },

    render: function(){

        // use state to incrementally render rows in to a single container 
        // until we know how many fit

        return(
            <div ClassName="app">
                {containersToRender}
            </div>
        );
    }
});

var Container = React.createClass({

    render: function(){
        return(
            <div className="container">
                <div ClassName="module">
                    {this.props.rows.map(function(row,i){
                        return <Row data={row} key={i} cb={this.props.cb} calcRows={this.props.calcRows}/>
                    }.bind(this))}
                </div>
            </div>
        );
    }

});

var Row = React.createClass({

    render: function() {
        return (
            <div className="row">{this.props.data.rowNum}</div>   
        );
    },

    componentDidMount: function(){
        if(this.props.calcRows) {
            this.props.cb();
         }
    }

});

它不优雅，滥用状态的程度让我感到局促不安，但这是一个非常粗糙的 js fiddle 上面的原型在行动：http://jsfiddle.net/qhuksapm/

更改 CSS 中 .container 的最大高度以进行测试。

至少它应该给你一些可以扩展和完善的东西。

是否可以根据Reactjs中的实际布局html来操作组件？

Is it possible to manipulate components based on the actual laid out html in Reactjs?

javascript

reactjs