如何条件渲染 css inline

Question

基本上，我可以这样做是因为，我有条件渲染 backgroundColor，但我还想渲染 position。我希望一些数据显示在右侧，其他数据显示在左侧。 我的问题是我不知道为什么我使用的 css 中的任何一个都不起作用： align, alignText, position工作一半float但它导致其他东西被毁坏了一半。

      {Data.map(i => (
        <StickyContainer
          key={i.id}
          className="container"
        
          style={{  alignText: "right", backgroundImage: `url("/zalety/${i.id}.jpg")`, 
        backgroundSize: "cover", 
    }}
        >
          <Sticky>
            {({ style }) => (
              <h1 style={{ ...style, background:   "#ae4a84", textAlign: "center" }} > {i.title} </h1>
            )}
          </Sticky>

          <h2 className="text-center" style={{width: "45%", backgroundColor:  (i.color ) ? `${i.color} ` : "white",
     
        
        }}>{i.content}</h2>
          
        </StickyContainer>

我尝试使用诸如ExampleCard之类的组件并将其放在那里，但它导致类/功能组件出错。

Answer 1

要有条件地添加内联 css，因为这是您传递给样式道具的 JS Object，您可以构造 object 以及 JS 扩展运算符，如下所示：

 ... <h2 className="text-center" style={{width: "45%", backgroundColor: (i.color )? `${i.color} `: "white",...(<condition for right alignment>)?{<CSS props for right alignment>}:{}}>{i.content}</h2>...

将每个 <> 替换为适当的数据。 上述更改将使您仅在条件为真时应用 CSS。

对于样式和右侧或左侧的 position，我通常会做类似{position:'absolute', right: 0}操作，但这仅在您的StickyContainer或h2的直接父级具有relative的position ，否则，它会根据具有relative的position的最近父级进行自我调整。

Answer 2

对后代来说，想尽办法改造后，正好我有一个千金难求的机会：

transform: (i.position == 'right') ? "translate(100%, 0)" : null,