如何使用 Link 将 div 包装在 React 中？

Question

<Link to="/promospace/detail">
    <div className="card">
        /* content */
    </div>
</Link>

我不能在上面做，没有错误，但它不起作用。任何线索如何将 div 包装在 Link 中？或者我必须将它绑定到点击处理程序？无法在 jsx 中使用链接？

Answer 1

在您的链接中使用一个跨度，并设置display: block它，这肯定会在任何地方都有效，并且会验证！

<Link to="/promospace/detail">
    <span className="card" style={{"display": "block"}}>
        /* content */
    </span>
</Link>

或者你可以对 onClick 事件进行动态路由

changeRoute = () => {
    this.context.router.push('/promospace/detail');
}
......
<div className="card" onClick={this.changeRoute}>
        /* content */
</div>

....
MyComponent.contextTypes = {
     router: React.PropTypes.func.isRequired
}