Question

请告诉我，如何正确解决以下问题？我有一个特定的组件，上面有一个控件，当我单击它时，触发setState。我需要调用函数this.setScrollLeft（），在这种情况下，我将其设置为选定的节点（ref）的分裂位置。这是我的实现，但是我确信有更好的解决方案：

import React from 'react';
import { ScoreCell, getScoreTheme } from 'components/scores';

class LeaderboardPlayerResult extends React.Component {
    constructor(props) {
        super(props);

        this.containerWidth = 198;

        this.data = this.props.data;
        this.playerResultRef = React.createRef();
    }

    componentDidMount() {
        this.element = this.playerResultRef.current;
        this.element.scrollLeft = this.containerWidth;
    }

    setScrollLeft = () => {
        if (this.element) {
            this.element.scrollLeft = this.containerWidth;
        }
    };

    playerResult = () => {
        if (this.data.playOffHoles) {
            return (
                this.data.playOffHoles.map((item, index) => {
                    return (
                        <div
                            className="leaderboard__player-result-row-wrapper"
                            key={index}
                        >
                            <div className="leaderboard__player-result-row">
                                <div className="leaderboard__player-result-cell">{item.holeId}</div>
                            </div>
                            <div className="leaderboard__player-result-row">
                                <div className="leaderboard__player-result-cell">{item.holePar}</div>
                            </div>
                            <div className="leaderboard__player-result-row">
                                <div className="leaderboard__player-result-cell leaderboard__player-result-cell--score">
                                    <ScoreCell
                                        childCss='tee-times-card__score'
                                        theme={getScoreTheme(item.playOffParScore)}
                                    >{item.playOffParScore}</ScoreCell>
                                </div>
                            </div>
                        </div>
                    );
                })
            );
        }
    };

    render() {
        console.log('LeaderboardPlayerResult render');
        this.setScrollLeft();
        return (
            <div
                className="leaderboard__player-result"
                ref={this.playerResultRef}
            >
                {this.playerResult()}
            </div>
        );
    }
}

Answer 1

放置this.setScrollLeft()的最佳位置是componentDidUpdate方法内部。

您已经在this.setScrollLeft()内部调用了此方法（componentDidMount），这是正确的。现在，您可以向componentDidUpdate发出另一个呼叫，由于componentDidUpdate在render之前被调用，因此它将像现在一样工作。

最终结果将是相同的，但是，您将关注点分离了：render仅呈现组件，而其他方法处理您的业务逻辑。

如果不确定componentDidMount和componentDidUpdate，请参见React.js官方文档中的以下摘录：

componentDidMount()

componentDidMount（）在安装组件后立即被调用。需要DOM节点的初始化应在此处进行。如果需要从远程端点加载数据，这是实例化网络请求的好地方。在此方法中设置状态会触发重新渲染。

componentDidUpdate()

componentDidUpdate（）在更新发生后立即被调用。初始渲染未调用此方法。

如何在React中正确初始化一个函数？

1 个答案: