Question

我有一个链接

<a href="about.html#div2">Click me</a>

当我单击链接时，将带到文档顶部的about.html。

如果我已经访问过about.html，并且在浏览器（chrome）的搜索栏中键入about.html＃div2，则浏览器将转到特定的div（div2）。

我尝试转到加载另一个页面的组件并在ComponentDidMount内部，添加了类似的内容

var sectionName = window.location.hash.slice(1);

//then show the section
$('#' + sectionName ).show();

但是由于某些原因，div仍然为空。如果安装了组件，该怎么办？

使用链接组件也不起作用，因为我需要将其放入路由器中，这是我使用

完成的

<HashRouter>

        <Link style={linkButton} to={about.html#div2}>Learn more</Link>
</HashRouter

但这似乎真的无能为力。

如何让我的浏览器通过另一页上的链接访问另一页上的div。

更新

这基本上是我的about组件

class About extends React.component {
    constructor(){
        var p = props;
        var Style = {
            display:'flex',
            flexDirection:'column'
        }
    }
    componentDidMount(){
        var sectionName = window.location.hash.slice(1);

        //then show the section
        $('#' + sectionName ).show();
    }
    render(){
        return (
            <div style={Style}>
                <Service id='div1' serv={Service1}/>
                <Service id='div2' serv={Service2}/>
                <Service id='div3' serv={Service3}/>
                <Service id='div4' serv={Service4}/>
                <Service id='div5' serv={Service5}/> 
            </div>

    )
    }
}

var Service = (props) => {
    var serv = props.serv;
    return (
        <div id={props.id}>
            ....
        </div>
    )
}

Answer 1

您不应同时使用jQuery和React。他们试图完成同一件事（DOM管理/操作）

相反，只需使用DOM访问器即可获取ID并在componentDidMount中滚动

componentDidMount () {
    const myId = window.location.hash.slice(1)
    const elem = document.getElementById(myId).
    if (elem) {
      elem.scrollIntoView()
    }
}

Answer 2

我不确定您要完成什么，但是我可以给您一些有关您编写内容的提示：

首先，相当于document.getElementById()的React是ReactDOM.findDOMNode(this.nodeName)，您必须记住 import ReactDOM from 'react-dom';

要使用此方法，必须在div上创建一个引用 ref={ ref => this.nodeName = ref }

另一个提示，我不熟悉您如何在DOM中组织组件，但是我个人不使用JSX中的html链接。您可以简单地将onClick={this.myClickFunction}添加到任何div中。这为处理JS中的点击提供了更大的自由度。

反应：链接到另一个html页面上的div

2 个答案: