将纯 HTML 脚本转换为 jsx答案

【问题标题】：Transform a plain HTML script to jsx将纯 HTML 脚本转换为 jsx
【发布时间】：2018-05-11 15:59:58
【问题描述】：

我在这里遇到了一个非常简单的问题，我需要一些帮助。我的 HTML 脚本是这样的

<nav class="mainNav">
  <ul>
    <li><a href="#" class="active">δσαδσαδσαδσα</a></li>
    <li><a href="#">δσαδσαδσαδσα</a></li>
  </ul>
</nav>

我想用 react-router 的 Link 标签来写，所以我在写

<ul className="main-nav">
  <NavLink to="/" onlyActiveOnIndex>δσαδσαδ</NavLink>
  <NavLink to="/" onlyActiveOnIndex>δσαδσαδ</NavLink>
</ul>

其中 NavLink 是一个带有此代码的简单小部件：

export default function (props) {
  return (
    <Link
      {...props}
    />);
}

我错过了什么？我的布局和 HTML 脚本不一样

【问题讨论】：

我不明白这个问题。你能澄清你的问题并指出它不工作的地方吗？
我的问题是我的纯 html 脚本的布局与我的带有 Navlink 组件的代码的布局不同，我不明白为什么

标签： html reactjs jsx

【解决方案1】：

您的意思是用<NavLink /> 替换您的<a /> 链接吗？

<nav className="mainNav">
  <ul>
    <li>
      <NavLink to="/" onlyActiveOnIndex>δσαδσαδ</NavLink>
    </li>
    <li>
      <NavLink to="/" onlyActiveOnIndex>δσαδσαδ</NavLink>
    </li>
  </ul>
</nav>

【讨论】：

我确实很困惑

【解决方案2】：

您可能需要将NavLink 组件放在li 标记内。

<nav class="mainNav">
  <ul>
    <li><NavLink to="/" onlyActiveOnIndex>δσαδσαδ</NavLink></li>
    <li><NavLink to="/" onlyActiveOnIndex>δσαδσαδ</NavLink></li>
  </ul>
</nav>

【讨论】：