javascript - jsx 上的占位符错误

Question

我有一个简单的 React HTML 输入组件，当它在不同的部分/页面上使用时，我添加了一些 Prop 来设置它及其占位符的样式。问题是有时我在编译时遇到错误(我们使用的是nextjs)。这是代码:

{placeHolderColor && (<style jsx>{`input::placeholder{color:${placeHolderColor}}`}</style>)}

基本上，我使用的是 inline If with Logical && Operator在 render 函数中检查 prop placeHolderColor 是否存在，如果存在则添加样式标签。

我收到的错误:

Warning: Unknown prop jsx on tag. Remove this prop from the element.

仅当您重新加载页面时才会出现该错误。如果您进行了更改并且热代码重新加载运行，则不会出现错误。不确定问题是否出在文字内的 var、'::placeholder' 伪元素或什么。代码无论如何都可以工作，如果定义了 placeHolderColor var，则应用样式。

Answer 1

当我测试你的代码时，我遇到了同样的错误(也在页面加载时)。之后，我在 ZEIT 的 #next slack channel https://zeit.chat/ 上与昵称 @g(在 github @giuseppeg)的 jsx 开发者进行了交谈。并且他确认有条件使用<style jsx>不支持标签。这是他的解释https://github.com/zeit/styled-jsx/issues/233 .

此外，删除条件并像这样插入标签后:

<style jsx>{'input::placeholder{color:${placeHolderColor}}'}</style>

我遇到了这个错误:

Module build failed: SyntaxError: Expected placeHolderColor to not come from the closest scope. Styled JSX encourages the use of constants instead of props or dynamic values which are better set via inline styles or className toggling. See https://github.com/zeit/styled-jsx#dynamic-styles.

根据https://github.com/zeit/styled-jsx#dynamic-styles的建议，您基本上不应该将动态值添加到 <style jsx> 内的模板文字中标签(尽管您可以从版本 1.0.4 开始放置常量和常量表达式(有关详细信息，请参阅答案底部的更新))。根据 slack 线程 https://zeit-community.slack.com/archives/C2U01UYEA/p1496928897076534 中的 @giuseppeg 评论，禁止使用 props/dynamic 值背后的原因，如下:“目前 styled-jsx 编译并生成静态代码，因此当像 color 这样的变量的值发生变化时，使最终 CSS 唯一的哈希值不会改变”

因此，正如您从文档中看到的那样，建议通过内联样式或类名切换来使用动态值。不幸的是，在 React 中通过内联样式设置伪元素(占位符等)的样式是不可能的，所以如果你有有限数量的可能颜色，那么为每种颜色情况创建一个类并像这样使用它:

const InputWithColouredPlaceholder = props => (
  <div>
    <input
      placeholder="text"
      className={
        'placeholderColourClass' in props && props.placeholderColourClass
      }
    />
    <style jsx>{`
       .reddy::placeholder {
         color: red;
       }
       .greeny::placeholder {
         color: green;
       }
     `}</style>
  </div>
);

并将其渲染为 <InputWithColouredPlaceholder placeholderColourClass="reddy" />

但是，如果可能的颜色范围很大，情况会变得更加复杂。在这种情况下，我建议在 ZEIT 的 slack https://zeit.chat/ 的#next channel 中寻求建议。 .

更新在模板文本中使用常量和常量表达式应该可以在 styled-jsx 1.0.4 中使用(但 nextjs 目前依赖于 1.0.3，单独安装 styled-jsx 不会有帮助，因此请等待 nextjs 更新以支持 styled jsx 1.0。 4).这意味着任何未通过 props 传递且未在组件内部创建的常量都应该起作用(例如，您可以拥有一个包含颜色常量的 js 文件，并将它们导入到输入组件中)。但它不适合您的情况，因为您需要一种动态的方式。