在DOM中将DOM节点滚动到屏幕顶部

Question

我在React中创建了一个创建DOM元素的渲染函数

public render(): JSX.Element {
        return <div className={"card " + (this.props.expanded ? "expanded " : "") + (this.props.className ? this.props.className : "")} >
            <div className="card-container">
                {React.Children.map(this.props.children, (child, index) => {
                    if (!React.isValidElement(child)) {
                        return;
                    }
                    if (child.type === CardSummary) {
                        return React.cloneElement(child, this.newSummaryProps(child));
                    }
                    return child;
                })}
            </div>
        </div>;
    }

这会向DOM呈现如下内容：

我需要在React.Component中做些什么才能返回扩展的＆＃34;卡？＃34; DOM节点到控制台。

如果节点超出视口，我希望该节点滚动到屏幕顶部。感谢您的时间和兴趣。

Answer 1

试试这个：

    public render(): JSX.Element {
        return <div className={"card " + (this.props.expanded ? "expanded " : "") + (this.props.className ? this.props.className : "")} 
        ref={this.props.expanded ? elem=>elem.scrollIntoView()||elem=>elem}>
            <div className="card-container">
                {React.Children.map(this.props.children, (child, index) => {
                    if (!React.isValidElement(child)) {
                        return;
                    }
                    if (child.type === CardSummary) {
                        return React.cloneElement(child, this.newSummaryProps(child));
                    }
                    return child;
                })}
            </div>
        </div>;
    }