Javascript 使用样式化jsx，如何使用存储在变量中的jsx上的样式？

我使用一个变量来有条件地显示不同的JSX，而不是使用在其父函数中定义的样式。我怎样才能做到这一点

您可以在此处看到演示：

---

我认为以下几点应该符合你的要求：

import React from 'react'

function Button(props) {
  return (
    <a 
      {...props} 
      style={{
        backgroundColor: 'blue',
        color: 'white',
        padding: '20px',
        margin: '10px'
      }}
    >
      {props.children}
    </a>
  );
}

function StyledJsxTest({ isLoggedIn, areButtonsVisible }) {
  return (
    <div>
      <h1>This is a headline</h1>
      <div>
        <Button className="button" href="/dashboard">Test</Button>
        {isLoggedIn ? 
          <Button className="button" href="/dashboard">Dashboard</Button>
          : 
          <Button className="button" href="/signIn">Log In</Button>
        }
      </div>
    </div>
  )
}

export default StyledJsxTest

从“React”导入React
功能按钮（道具）{
返回(
{props.children}
);
}
函数StyledJsxTest（{isLoggedIn，areButtonsVisible}）{
返回(
这是一个标题
试验
{伊斯洛格丁？
仪表板
: 
登录
}
)
}
导出默认样式djsxstest

我猜您可能忘了将

样式化的jsx/babel

添加到您的

.babelrc

中

工作示例：

---

实际上，我认为运行代码并获得.button类的样式没有问题
然而，我可能会写一些不同的东西；但是，它起作用了
问题可能是浏览器缓存
或其他问题

---

感谢您的回复，但我特别想使用样式化的jsx包。谢谢你的回复，马特。事实上我已经准备好了。我查看了你的演示，我想你可能误解了我的问题。我为您的演示提供了分叉，并按照我尝试使用它的方式进行了设置，但它在那里不起作用：（啊，我明白了。你打算把它存储在变量中是什么意思？所以我的例子当然是简化的，但是有时候当有if/else语句来有条件地呈现JSX时，我喜欢把它放在一个变量中，然后把这个变量添加到JSX中，这样主呈现函数就容易多了。在这种情况下，你可以添加

global

到样式标记：不太熟悉

样式化的jsx

（我使用

样式化组件

），也就是说，它似乎全局应用于className

按钮

：（更新的示例）。

const buttons = isLoggedIn ? (
      <a className="button" href="/dashboard">Dashboard</a>
    ) : (
      <>
        <a className="button" href="/signIn">Log In</a>
      </>
    )

import React from 'react'

function Button(props) {
  return (
    <a 
      {...props} 
      style={{
        backgroundColor: 'blue',
        color: 'white',
        padding: '20px',
        margin: '10px'
      }}
    >
      {props.children}
    </a>
  );
}

function StyledJsxTest({ isLoggedIn, areButtonsVisible }) {
  return (
    <div>
      <h1>This is a headline</h1>
      <div>
        <Button className="button" href="/dashboard">Test</Button>
        {isLoggedIn ? 
          <Button className="button" href="/dashboard">Dashboard</Button>
          : 
          <Button className="button" href="/signIn">Log In</Button>
        }
      </div>
    </div>
  )
}

export default StyledJsxTest