css - 有条件地内联样式基于 prop 的 react 组件

Question

我需要根据传递到我的 React 组件中的 Prop 设置 div 的背景颜色。 React 组件的内联样式我很清楚，但我不知道如何正确应用内联样式来根据 Prop 进行更改。如果 Prop selected 等于 true，我只想在 right-toggle 的内联样式中分配 Prop rightSideColor 的值。

export default function UiToggle(props) {
  const { leftLabel, rightLabel, selected, rightSideColor, leftSideColor } = props;

  return (
    <div className="lr-toggle-select" style={{ width: `${width}px` }} >
      <div className="lr-gray-background" />
      <div>
        {leftLabel}
      </div>
      <div className={'lr-toggle right-toggle' style={{ selected ? (backgroundColor: rightSideColor) : null }}>
        {rightLabel}
      </div>
    </div>
  );
}

Answer 1

修正了一个拼写错误 - { before className

如果selected 为假，您可以返回一个空对象，否则为预期值

例子:

export default function UiToggle(props) {
  const { leftLabel, rightLabel, selected, rightSideColor, leftSideColor } = props;

  return (
    <div className="lr-toggle-select" style={{ width: `${width}px` }} >
      <div className="lr-gray-background" />
      <div>
        {leftLabel}
      </div>
      <div className='lr-toggle right-toggle' style={ selected ? {backgroundColor: rightSideColor} : {} }}>
        {rightLabel}
      </div>
    </div>
  );
}