Reactjsx根据JSON-Value设置样式

Question

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

我从一个验证输入字段的Web服务获取一个JSON-Object。

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

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'}`}}
    ...
/>

这里发生了什么事

通过利用速记条件，我们可以根据isValidTest中obj的值（将被对象的名称替换）将borderColor和boxShadow应用于样式（!!）

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

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

例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，后者又返回包含样式的const，提供给此函数的是来自isValidTest的obj.validate属性。

我更新了sandbox以包含上面的例子

希望这可以帮助！