javascript - 使用 "` 的 es6 jsx 语法错误“

Question

const { module } = this.props;

return(
    <div className="Card">
        <Link to=`/${module}/detail`></Link>
    </div>
 )

上面的语法有什么问题？我收到错误消息 JSX value should be either an expression or a quoted JSX text

Answer 1

在 JSX 中使用 javascript 时，您需要将其包裹在花括号中。您在 Link 组件的 to 属性值中使用的模板文字需要花括号。

return (
    <div className="Card">
        <Link to={`/${module}/detail`}></Link>
    </div>
 );