时间戳

首页 > 解决方案 > 如何在 React 中的兄弟组件之间滚动？

javascript - 如何在 React 中的兄弟组件之间滚动？

问题描述

我希望能够在我的 React 应用程序中的表格组件之间滚动。我为一个名为 FormattedTable 的表创建了一个组件，它接收道具并显示我想要的所有信息。

许多表格引用了其他带有可点击文本的表格。如果您单击对另一个表的引用并且它没有显示，我会将表添加到显示中，并且应用程序会自动向下滚动到已添加表的屏幕底部。但是，如果表格已经显示，我希望应用程序滚动到它已经显示的位置。

单击引用并添加另一个表都发生在 FormattedTable.js 文件中。

在我的 Home.js 中，我有一个名为的对象数组selected，该数组包含我希望在表格中显示的所有对象。我通过在每次迭代中selected创建一个组件的数组进行映射来显示表格。FormattedTable

主页.js

<div className="rightColumn" style={{flex: 4}}>
    {selected.length > 0 ? selected.map((obj, index) => {
        return (
            <div style={{width: '60%'}}>
                <FormattedTable data={data} selected={selected} obj={obj} index={index} onSelectedChange={setSelected}/>
                &nbsp;
            </div>
        )
    })
    : null} 
</div>

因为 FormattedTables 是在 Home.js 文件中动态创建的，所以我不确定如何在 FormattedTable.js 中从一个表滚动到另一个表（因为只有 1 个文件但有多个实例）。

有谁知道如何在 FormattedTable.js 文件中做到这一点？

到目前为止，我尝试的是向正在动态创建的 div 添加一个引用，Home.js并将 triggerScroll 方法传递给FormattedTable组件，以便在单击表上的引用时触发滚动。但是，问题在于它仍然滚动到最后一个元素，因为当映射停止时 ref 的值（自然）是数组的最后一个元素。

<div className="rightColumn" style={{flex: 4}}>
    {selected.length > 0 ? selected.map((obj, index) => {
        return (
            <div ref = {scrollRef} style={{width: '60%'}}>
                <FormattedTable  data={data} selected={selected} obj={obj} index={index} onSelectedChange={setSelected} triggerScroll={scrollToTable}/>
                &nbsp;
            </div>
        )
    })
    : null} 
</div>

标签： javascripthtmlreactjs

解决方案

修正了自己：

为数组中的每个对象添加了一个selected名为inFocus. 数组中最近选择的对象的该属性值为 true。

然后，我添加了一个三元组来设置FormattedTable基于inFocus属性的 ref，因此一次只能将一个对象设置为 ref。

格式化表格.js

 //For selecting results
    const select = (name) => {
        //Deep clone object so that results doesn't change when selected changes
        const obj = cloneDeep(data.find(element => element.name === name));
        const refObj = data.find(element => element.name === name);

        //If object is in the original JSON array
        if(typeof refObj !== 'undefined') {
            //If object is not in the selected array, add it to selected array
            if(selected.find(element => element.name === name) === undefined) {
                //Make the new object in focus and remove the focus for all the other objects
                obj.inFocus = true;
                copy.map((el) => {
                    if(el.name !== obj.name) {
                        el.inFocus = false
                    }
                })
                handleSelectedChange([...copy, obj]);
            }
            //Otherwise, set focus to selected object
            else {
                //Make the selected object in focus and remove the focus for all the other objects
                copy.map((el) => {
                    if(el.name !== obj.name) {
                        el.inFocus = false
                    } else {
                        el.inFocus = true
                    }
                })
                handleSelectedChange([...copy]);
            }
        }
    }

return (
        <div ref={obj.inFocus ? messagesEndRef : null} style={{display: 'flex', flexDirection: 'row'}}>
...
)

推荐阅读