Question

我是React.js的新手，我在我的react项目中使用jQuery识别鼠标和点击事件，基于克隆<li>标签的导航<a>列表并显示在目标div id中，一切正常，但点击新生成的链接加载整个页面而不是屏幕的一小部分，我知道新克隆的jquery代码有href但是反应通缉<Link>这里是我的缩小版本代码来理解问题

// minified code 
class Sidebar extends Component {


    componentDidMount() {

        $(".navigation").on("mouseenter click", ".navigation-menu > li", function() {
            generateLinks($(this))
        });


        function generateLinks(e) {
            var links = e.find("li");
            var generatedMenuLinks = links.clone().appendTo("#targetDiv");

            // rest of the code 
        }
    }


    render() {
        return(
            <div className="navigation">
                <ul className="navigation-menu">
                    <li class="menu1">
                        <Link to="/menu1/data1">Menu1Data1</Link>
                        <Link to="/menu1/data2">Menu1Data2</Link>
                        <Link to="/menu1/data3">Menu1Data3</Link>
                    </li>
                    <li class="menu2">
                        <Link to="/menu2/data1">Menu2Data1</Link>
                        <Link to="/menu2/data2">Menu2Data2</Link>
                        <Link to="/menu2/data3">Menu2Data3</Link>
                    </li>
                    <li class="menu3">
                        <Link to="/menu3/data1">Menu3Data1</Link>
                        <Link to="/menu3/data2">Menu3Data2</Link>
                        <Link to="/menu3/data3">Menu3Data3</Link>
                    </li>
                </ul>
            </div>
        );
    }

}

提前谢谢

Answer 1

类补充工具栏扩展了Component {

render() {
    return(
        <div className="navigation" onClick={() => {
            /*

            DO WHAT EVER YOU WANT HERE YOU CAN
            USE .map() ON AN ARRAY THAT HAS YOUR 
            DATA AND RETURN <li> WITH WHAT EVER YOU
            WANT. MAKE SURE TO USE CURLY BRACES 
            ANY WHERE YOU WANT TO INCLUDE JAVASCRIPT!
            */ 
        }}>
            <ul className="navigation-menu">
                <li class="menu1">
                    <Link to="/menu1/data1">Menu1Data1</Link>
                    <Link to="/menu1/data2">Menu1Data2</Link>
                    <Link to="/menu1/data3">Menu1Data3</Link>
                </li>
                <li class="menu2">
                    <Link to="/menu2/data1">Menu2Data1</Link>
                    <Link to="/menu2/data2">Menu2Data2</Link>
                    <Link to="/menu2/data3">Menu2Data3</Link>
                </li>
                <li class="menu3">
                    <Link to="/menu3/data1">Menu3Data1</Link>
                    <Link to="/menu3/data2">Menu3Data2</Link>
                    <Link to="/menu3/data3">Menu3Data3</Link>
                </li>
            </ul>
        </div>
    );
}

}

尝试像我放在那里的东西。阅读箭头功能中的注释。我希望有所帮助。就像Silver Wings的男孩说React不能很好地使用jQuery。它使用JSX。 Suerte

React路由器不使用jquery动态生成的href链接

1 个答案: