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

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

本文关键字：布局 html 组件 操作 Reactjs 是否      更新时间：2023-10-02

所以我觉得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>

现在假设容器类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中有效地实现这一点。

要使其完全动态，需要逐个计算容器的高度和行的总高度。当行的总高度超过容器的高度时，我们就知道一个容器中可以容纳多少行，并且可以根据需要渲染任意多个容器，每个容器都有它可以处理的最大行数。

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

以下是如何工作的大致概述：

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小提琴原型：http://jsfiddle.net/qhuksapm/

在要测试的CSS中更改.contain的最大高度。

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

相关文章：