gpt4 book ai didi

javascript - 无法从 Twin.macro 中的 Prop 获取值

转载 作者:行者123 更新时间:2023-12-04 08:15:57 27 4
gpt4 key购买 nike

你可以在这里看到我想要做的一个例子:https://codesandbox.io/s/vibrant-leaf-qj8vz
注意:此特定示例使用 Twin.macro带有样式组件。在我的本地计算机上,我使用带有情感/next.js 的 Twin.macro 尝试了同样的事情并获得了相同的结果。
这是一个示例组件,说明了我正在尝试做的事情:

import React from 'react'
import tw from 'twin.macro'

const Acme = ({ children, type }) => <div css={[tw`${type}`]}>{children}</div>

export default Acme
以下是我将如何使用该组件: <Acme type="text-2xl">Text Goes Here</Acme>我的期望是我将能够设置 <Acme /> 的这个实例的样式。通过我传递给 type 的顺风 css 类来创建组件支柱。相反,我收到以下错误消息:
/src/components/Acme.js: twin.macro: Property value expected type of string but got null Learn more: https://www.npmjs.com/package/twin.macro
在试图弄清楚这一点时,我注意到一些可能相关的有趣内容。这是有效的代码变体:
const Acme = ({ children, type }) => {
const typeClass = 'text-2xl'
const typeObj = {
class: 'text-2xl',
}

return <div css={[tw`${typeClass}`]}>{children}</div>
}

export default Acme
请注意,我创建了一个变量 typeClass并将其设置为相同的顺风 css 类。请特别注意以下代码行:
css={[tw`${typeClass}`]}
我已经更换了 Prop type使用变量 typeClass .这有效。但是现在,而不是使用变量 typeClass让我们使用对象 typeObj我创建如下:
const Acme = ({ children, type }) => {
const typeClass = 'text-2xl'
const typeObj = {
class: 'text-2xl',
}

return <div css={[tw`${typeObj.class}`]}>{children}</div>
}

export default Acme
这是 不是 工作并产生相同的错误:
/src/components/Acme.js: twin.macro: Property value expected type of string but got null Learn more: https://www.npmjs.com/package/twin.macro
即使 typeClass === typeObj.class 也是如此计算结果为 true .
我不知道这是否有帮助,但也许它可以帮助指出解决方案。如果我能拿到 type Prop 表现得像 typeClass变量然后希望这会起作用。
无论哪种方式,知道为什么这不起作用以及如何解决吗?
谢谢。

最佳答案

我找到了答案(意思是其他人在不同的网站上回答了这个问题)。这是。我必须重写组件和组件的用法如下:

// Acme.js
const Acme = ({ children, type }) => <div css={[type]}>{children}</div>

---

// App.js
import tw from "twin.macro"

<Acme type={tw`text-2xl`}>Text Goes Here</Acme>

我已经试过了,它的工作原理。

关于javascript - 无法从 Twin.macro 中的 Prop 获取值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65700495/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com