Reactjsx 设置样式取决于 JSON 值

Question

我正在尝试用 React 编写一个 SPA。

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

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

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

当 JSONValue 为 0 时

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

我的 JSON 看起来像这样：

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

---

edit：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应用于样式(该值将替换为对象的名称)(！！！

看看这个例子，看看这里发生了什么

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

例 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 }
/>

同样，在此沙盒中，两个示例都显示在同一页面上的同一文件中。

你也可以看看这个问题和答案，了解更多的例子和信息

编辑

要解释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，提供给此函数的是obj.validate中的isValidTest属性。

我已经更新了沙箱以包含上述示例

希望这有帮助！