有条件地内联样式基于 prop 的反应组件答案

【问题标题】：Conditionally inline style a react component based on prop有条件地内联样式基于 prop 的反应组件
【发布时间】：2017-09-15 01:43:10
【问题描述】：

我需要根据传入我的 react 组件的 prop 设置 div 的背景颜色。 React 组件的内联样式我很清楚，但我不知道如何正确应用内联样式以根据道具进行更改。如果道具selected 等于true，我只想在right-toggle 的内联样式中分配道具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>
  );
}

【问题讨论】：

标签： css reactjs conditional

【解决方案1】：

修正了一个错字 - { 在 className 之前

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

例子：

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>
  );
}

【讨论】：

【解决方案2】：

我建议将所有样式以及条件运算符放在单独的 const 中。

export default function UiToggle(props) {

  const { leftLabel, rightLabel, selected, rightSideColor, leftSideColor } = props;

  const rightToggleStyle = {
     backgroundColor: selected ? rightSideColor : null
  };

  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={rightToggleStyle}>
        {rightLabel}
      </div>
    </div>
  );
}

我会尝试对宽度的样式做同样的事情。祝你好运！

【讨论】：

【解决方案3】：

您可以有条件地设置样式等属性的值，使用优先规则覆盖它们，并确定是否完全包含它们。

export default function UiToggle(props) {
  const { leftLabel, rightLabel, selected, rightSideColor, leftSideColor } = props;
  //specify style and id (and any other attributes) or don't.
  const attrs = selected ? { style: { backgroundColor: "rightSideColor" },id:"hi123" }:{}
  //Conditionally override the class names if we want:
  if (props.className) attrs.className = props.className

  return (
    <div className="lr-toggle-select" style={{ width: `${width}px` }} >
      <div className="lr-gray-background" />
      <div>
        {leftLabel}
      </div>

      {/*Use the spread operator to apply your attributes from attr*/}
      {/*Note that the 'id' set below can't be overridden by attrs whereas*/}
      {/*className will be. That's because precedence goes from right to left.*/}           
      {/*Rearrange them to get what you want.*/}
      {/*Funky comment format is to make valid JSX and also make SO formatter happy*/}          

      <div className='lr-toggle right-toggle' {...attrs} id="attrs_cant_override_this_because_its_on_the_right">
        {rightLabel}
      </div>
    </div>
  );
}

【讨论】：

【解决方案4】：

试试这样的：

   <div className='lr-toggle right-toggle' style={ selected ? {backgroundColor: rightSideColor} : '' }}>
    {rightLabel}
  </div>

【讨论】：