如何替换 object 中的特定字符串？

Question

在我的应用程序 header 中，我有两个样式相同的锚元素（link 到“Feed”和“Bio”页面）。当它们悬停时，它们会触发与默认样式不同的样式（但两个锚元素在悬停状态下仍然共享相同的样式）。此外，如果用户当前位于与 header 中的锚点 link 关联的页面上，则该活动状态的样式与悬停状态样式相同。所有样式都是内联的，因为不幸的是我们没有使用样式 sheet —— 所以我们一直在使用三元运算符来根据锚元素的状态触发不同的样式。以下是我创建的 object，其中包含 Bio link:

的所有样式

const bioStyle = { 
  color: presentPage === 'bio' || hover ? 'green' : 'pink',
  borderTop: presentPage === 'bio' || hover ? '3px dotted purple' : 'none',
  paddingTop: presentPage === 'bio' || hover ? '1.5rem' : 'none'
}

上面的 bioStyle 将被设置为 return 函数中 Bio 锚元素中 style 属性的值，如下所示：style={bioStyle}。 feedStyle object 与bioStyle 相同；但是，区别在于所有三元运算符中的条件都从 presentPage === 'bio' 变为 presentPage === 'feed'。与其再次编写几乎相同的代码，不如通过在 bioStyle 上使用替换方法创建 feedStyle 并将所有 'bio' 值替换为 'feed'.

我研究了 .replace() 方法，但它只适用于字符串。有没有其他方法可以实现我想要的？

Answer 1

您可以编写一个函数，根据传递的参数 return 对象。喜欢

function getStyle(page){
  return { 
    color: presentPage === page || hover ? 'green' : 'pink',
    borderTop: presentPage === page || hover ? '3px dotted purple' : 'none',
    paddingTop: presentPage === page || hover ? '1.5rem' : 'none'
  }
}

然后调用它

const bioStyle = getStyle('bio');
const feedStyle = getStyle('feed');

如何替换 object 中的特定字符串？

How can I replace specific strings within an object?

javascript

reactjs

object

conditional-operator