如何替换对象内的特定字符串，实现React内联样式对象复用？

最优解决方案是把重复的样式逻辑封装成样式生成工厂函数，无需硬写两份几乎完全一致的样式对象，后续修改导航样式只要调整这一处即可，维护成本极低。

封装后的函数示例如下：

// 入参为页面标识、当前锚点的hover状态
const getNavItemStyle = (pageKey, isHover) => {
  const showActiveStyle = presentPage === pageKey || isHover;
  return {
    color: showActiveStyle ? 'green' : 'pink',
    borderTop: showActiveStyle ? '3px dotted purple' : 'none',
    paddingTop: showActiveStyle ? '1.5rem' : 'none'
  }
}

使用方式和你原有逻辑完全兼容，直接在锚点元素的style属性中调用函数即可：

• Bio锚点写法：style={getNavItemStyle('bio', hover)}
• Feed锚点写法：style={getNavItemStyle('feed', hover)}

如果确实想尝试字符串替换的方式，也可以把样式对象的生成逻辑序列化后做替换再反序列化，但这种写法可读性差、容易触发隐性bug，完全不推荐使用。

内容的提问来源于stack exchange，提问作者Roger Cooper