在React应用中实现滚动到页面特定文本位置的教程

// 假设this.state.contract.text是一个包含多行文本的数组
{this.state.contract.text.map((line, index) => (
    <p key={index} className="text-line">
        {line}
        {/* 
        Highlighter组件可能用于高亮文本，但它不直接影响滚动逻辑。
        我们主要关注<p>标签的文本内容。
        <Highlighter
            highlightClassName="MyHC"
            highlightStyle={{backgroundColor: "#ffd500"}}
            searchWords={queryWords}
            autoEscape={true}
            textToHighlight={line}
        />
        */}
    </p>
))}

<div className="search-controls">
    <input id="searchText" type="text" placeholder="输入要查找的文本" />
    <button onClick={() => this.scrollToText()} type="button">查找并滚动</button>
</div>

import React from 'react';

class MyTextScroller extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            contract: {
                text: [
                    "这是第一段文本，包含关键词“示例”。",
                    "第二段文本，没有任何关键词。",
                    "第三段文本，再次包含“示例”关键词。",
                    "很长的一段文本，用来测试滚动效果，确保页面能够正确地定位到指定内容。这里也包含“示例”。",
                    "最后一段文本。"
                ]
            }
        };
        this.inputRef = React.createRef(); // 用于获取输入框的值
    }

    componentDidMount() {
        // 组件挂载后，如果需要立即滚动到某个预设文本，可以在这里调用
        // 例如：this.scrollToText("示例");
    }

    scrollToText = () => {
        const searchText = this.inputRef.current.value; // 获取输入框的值
        if (!searchText) return;

        // 获取所有可能的文本段落元素
        // 使用类名更精确，避免选择到页面上所有<p>标签
        const paragraphs = document.querySelectorAll('p.text-line'); 

        for (const p of paragraphs) {
            // 使用innerHTML获取元素包含的所有文本，包括子元素（如Highlighter生成的span）
            // 考虑使用textContent如果只需要纯文本，但innerHTML在某些高亮场景下更符合预期
            if (p.innerHTML.includes(searchText)) {
                // 找到第一个匹配的元素，然后滚动到它
                p.scrollIntoView({
                    behavior: 'smooth', // 平滑滚动
                    block: 'start'      // 将元素的顶部与视口的顶部对齐
                });
                return; // 找到后立即退出循环
            }
        }
        console.log(`未找到包含 "${searchText}" 的文本。`);
    };

    render() {
        return (
            <div>
                <div className="search-controls" style={{ marginBottom: '20px' }}>
                    <input id="searchText" ref={this.inputRef} type="text" placeholder="输入要查找的文本" style={{ padding: '8px', marginRight: '10px' }} />
                    <button onClick={this.scrollToText} type="button" style={{ padding: '8px 15px', cursor: 'pointer' }}>查找并滚动</button>
                </div>
                {/* 模拟一个可滚动的容器，以便在内容较少时也能看到滚动效果 */}
                <div style={{ height: '300px', overflowY: 'scroll', border: '1px solid #ccc', padding: '10px' }}> 
                    {this.state.contract.text.map((line, index) => (
                        <p key={index} className="text-line" style={{ marginBottom: '10px', lineHeight: '1.6' }}>
                            {line}
                        </p>
                    ))}
                </div>
            </div>
        );
    }
}

export default MyTextScroller;