React 组件 props 中的“$”有什么作用？

Question

我正在研究样式组件，在“根据道具进行调整”部分中遇到了一些问题。

import './App.css';
import styled from 'styled-components'

const PrimaryButton = styled.button`
  color: ${props=>props.primary?"white":"black"};
  background-color: ${props=>props.primary?"blue":"gray"};
`;

function App() {
  return (
    <div>
      <PrimaryButton>Normal</PrimaryButton>
      <PrimaryButton primary>Primary</PrimaryButton>
    </div>
  );
}

export default App;

起初，我尝试使用这段代码，控制台告诉我使用primary=true，所以我就这么做了。

但控制台中出现以下错误，显示“看起来未知的 prop“primary”正在发送到 DOM”。为了解决这个问题，我简单浏览了一下styled-components文档。我发现他们使用$primary而不是primary. 所以最终的代码如下所示：

import './App.css';
import styled from 'styled-components'

const PrimaryButton = styled.button`
  color: ${props=>props.$primary?"white":"black"};
  background-color: ${props=>props.$primary?"blue":"gray"};
`;

function App() {
  return (
    <div>
      <PrimaryButton>Normal</PrimaryButton>
      <PrimaryButton $primary>Primary</PrimaryButton>
    </div>
  );
}

export default App;

我再也看不到错误了，但我仍然不知道它发生的原因并已解决。

这是什么$意思？

Answer 1

这些由样式组件使用，与 React 无关。

如果您想阻止样式组件使用的 props 被传递到底层 React 节点或渲染到 DOM 元素，您可以在 prop 名称前加上美元符号 ($) 前缀，将其变成瞬态 prop。

您可以在这里了解更多信息，也可以找到示例。