Reactjsx 根据 JSON-Value 设置样式

Question

下午好，我正在尝试用 React 编写一个 SPA。

我从一个验证输入字段的网络服务中得到一个 JSON 对象。

现在我想根据 Web 服务的答案设置输入字段的样式。 例如样式应该是：

style={{borderColor: 'green',   boxShadow: '0 0 5px green',}}

当 JSONValue 为 0 时

<Input
    style = ???
    ...
/>

我的 JSON 如下所示：

{
    "validate": {
        "isValidTest": 0
        ...
    }
}

---

编辑：JSON 可以有三个不同的值，对应三种不同的样式。

Answer 1

这是你可以做的一个例子

示例 1

<Input
    style = 
        {{borderColor: obj.validate.isValidTest === 0 ? 'red':'green'
        boxShadow: `0 0 5px ${obj.validate.isValidTest === 0 ? 'red' : 'green'}`}}
    ...
/>

这里发生了什么

通过使用简写条件，我们可以根据obj 中isValidTest 的值将borderColor 和boxShadow 应用于样式（将被您的对象名称替换）（！！）

看看this example 看看这里发生了什么

注意 当然，可以通过根据isValidTest 的结果设置className 或根据相同的条件对其应用不同的样式常量来将其与内联style 属性分开

示例 2

const errorStyles = {
  borderColor: 'red',
  boxShadow: '0 0 5px red'
}
const validStyles = {
  borderColor: 'green',
  boxShadow: '0 0 5px green'
}

<Input
    style={ obj.validate.isValidTest === 0 ? errorStyles : validStyles }
/>

同样，this sandbox 中的两个示例都显示在同一文件的同一页面上。

您还可以查看this question & answer 了解更多示例和信息

编辑

要在isValidTest 中考虑两个以上的值，您可以这样处理：

const errorStyles = {
  borderColor: 'red',
  boxShadow: '0 0 5px red'
}
const validStyles = {
  borderColor: 'green',
  boxShadow: '0 0 5px green'
}
const error2Styles = {
  borderColor: 'magenta',
  boxShadow: '0 0 5px magenta'
}
const valid2Styles = {
  borderColor: 'yellow',
  boxShadow: '0 0 5px yellow'
}


isValid = (valid) => {
    switch(valid) {
      case -1:
        return errorStyles
        break;
      case 0:
        return error2Styles
        break;
      case 1:
        return validStyles
        break;
      case 2:
        return valid2Styles
        break;
   }
}


<Input
    style={this.isValid(obj.validate.isValidTest)}
/>

上面的例子发生了什么

如上所示，style 属性指的是this.isValid，而this.isValid 又返回包含样式的const，提供给此函数的是来自obj.validate 的isValidTest 属性。

我已更新 sandbox 以包含上述示例

希望这会有所帮助！