我可以减少 NavLink 组件样式 prop 代码的重复吗？

Question

我正在使用 React-Router-DOM v6 练习路由，每当我在该路由上时，我都会使用

NavLink

组件的

style

属性将菜单标题中的文本设置为粗体。我让它工作了，但想知道是否有一种方法可以在函数中声明它，然后在样式属性中调用该函数。我已经尝试了太多的事情，但似乎不是一个选择。

Answer 1

是的，您当然可以将该匿名函数分解为命名函数，以用作

style

prop 回调函数。

示例：

const getLinkStyle = ({ isActive }) => isActive ? { fontWeight: "bold" } : {};

<NavLink
  className="..."
  to="..."
  style={getLinkStyle}
>
  ...
</NavLink>