Question

试图找出是否有绕过React的颜色错误处理的方法。

如果用户输入的颜色不正确（十六进制颜色或字符串），则第一个内部DIV用作默认背景，背景为空。第二个内部DIV位于第一个内部DIV上，用于显示this.props.value的颜色。这样可以很好地在第一个div中显示我的.msgBox { background-color: #EBEEFD; border-radius: 25px; max-width: 150px; margin-top: 10px; } .msgText { padding: 10px; }值，并且当用户输入正确的颜色（例如橙色）时，第二个div将显示橙色的背景色，与第一个div重叠。

现在，如果我将emptyBackground更改为orange，则该div将更改为orangered。

我要解决的部分是当我键入orangere时，它仍将显示原始的橙色而不是第二个div的默认背景。输入不正确的颜色后，react似乎不会提示重新渲染。有什么办法解决这个问题？

orangered

Answer 1

此行为与React无关。现代浏览器只会忽略将颜色属性设置为不支持的值的尝试。您可以轻松地通过打开开发控制台，以某种方式选择DOM元素并将其颜色设置为橙色，例如myElement.style.backgroundColor = 'orange'来自己尝试。然后尝试将其设置为无效值，例如“ orangere”。元素将保持橙色，而不是还原为默认值或继承的值。

可能最好的解决方法是手动检查用户输入的颜色是否有效。 is-color包之类的东西不仅会检查它是否是valid color name，还会检查HEX和RGB值。如果用户输入有效，请让React照常渲染它。但是，如果无效，则可以捕获该错误并改用默认值或继承的值。

Answer 2

尽管这是标准的DOM元素行为（如noted by @jered），但是您可以使用react覆盖它。

用另一个div（.color-display）将.color-display-wrapper div包裹起来，并为其设置默认颜色。通过CSS variable更新.color-display背景。如果变量中的值无效，则背景颜色将是透明的，并且将显示包装器的背景。

class ColorRender extends React.Component {
  state = { color: 'orange' };
  
  onChange = (e) => this.setState({ color: e.target.value });

  render() {
    const {color} = this.state;
    
    return (
      <div>
        <input type="text" onChange={this.onChange} />
        
        <div className="color-display-wrapper">
          <div 
            className="color-display"
            style={{ '--color': color }}
          />
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <ColorRender />,
  demo
);

:root {
  --color: transparent;
}

.color-display-wrapper {
  width: 200px;
  height: 200px;
  background: url(https://picsum.photos/200/200);
}

.color-display {
  position: relative;
  background: var(--color);
  height: 100%;
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="demo"></div>

如何绕过React对颜色的错误处理

2 个答案: