jsx上的占位符错误

Posted 2023-02-22

【中文标题】jsx上的占位符错误

【英文标题】：Error with place holder on jsx

【发布时间】：2017-11-09 00:17:51

【问题描述】：

我有一个简单的 react html 输入组件，当它用于不同的部分/页面时，我添加了一些道具来设置它的样式及其占位符。问题是有时我在编译时遇到错误（我们使用的是 nextjs）。 这是代码：

placeHolderColor && (<style jsx>`input::placeholdercolor:$placeHolderColor`</style>)

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

我得到的错误：

警告：标签上的未知道具 jsx。从元素中移除这个道具。

该错误仅在您重新加载页面时发生。如果您进行了更改并且热代码重新加载运行，则没有错误。不确定问题是文字中的 var、'::placeholder' 伪元素还是什么。代码仍然有效，如果定义了 placeHolderColor 变量，则应用样式。

【参考方案1】：

当我测试你的代码时，我得到了同样的错误（也在页面加载时）。之后，我在 ZEIT 的#next slack 频道 https://zeit.chat/ 上与昵称 @g（在 github @giuseppeg 上）的风格化 jsx 开发人员交谈，他确认不支持有条件地使用 <style jsx> 标签。这是他的解释https://github.com/zeit/styled-jsx/issues/233。

此外，在删除条件并像这样插入您的标签后：

<style jsx>'input::placeholdercolor:$placeHolderColor'</style>

我遇到了这个错误：

模块构建失败：SyntaxError：预期 placeHolderColor 不是来自最近的范围。 Styled JSX 鼓励使用常量而不是 props 或动态值，它们最好通过内联样式或 className 切换来设置。见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 评论，禁止使用道具/动态值的原因如下：“目前 styled-jsx 编译并生成静态代码，因此散列使最终 CSS 独一无二当color 等变量的值发生变化时不会改变”

因此，正如您从文档中看到的那样，建议通过内联样式或类名切换来使用动态值。不幸的是，无法通过 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 频道中寻求建议。

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

【讨论】：

谢谢亚历克斯，我一直在寻找更动态的东西，可以通过道具设置占位符颜色并且没有预设，但现在似乎不可能。

ps 我在错误消息后的第二部分添加了阻止使用动态值的原因。

pps @giuseppeg 还表示他们计划在未来增加使用动态值的可能性

【参考方案2】：

我收到错误Warning: Unknown prop 'jsx' on <style> tag. Remove this prop from the element. For details, see FB react-unknown-prop. 您的样式标签中的 jsx 属性是什么意思？直接删除？

【讨论】：

添加 jsx 属性使样式仅匹配您的组件元素，因为 jsx 为它们添加动态属性以用作 CSS 选择器。