Reactjsx根据JSON-Value设置样式

Question

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

我从Web服务获得一个JSON-Object，它验证了Inputfields。

现在我想根据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'}`}}
    ...
/>

这里发生了什么

通过使用速记条件，我们可以应用bo​​rderColor＆amp; boxShadow to the style取决于isValidTest中obj的值（将被对象的名称替换）（!!）

看看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 1}}。

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

希望这有帮助！