React登录注册表单切换下划线不生效及JSX内联样式问题咨询

1. 下划线不移动问题修复 #

你遇到的问题确实是JSX内联样式语法错误导致的，React内联样式的规则是：

• 最外层的{}是告诉JSX内部要写JS表达式
• 内层的{}是样式对象本身，对象的属性值直接接收字符串、数字或者其他合法JS表达式，不需要额外嵌套大括号

你原来的错误写法：

<div className="linea" style={{"margin-left":{actMargin}}}></div>

这里给actMargin多套了一层{}，导致margin-left实际拿到的值是{actMargin: '0px'}这类对象，浏览器无法识别，所以样式不生效。

修改为正确写法即可：

<div className="linea" style={{ marginLeft: actMargin }}></div>
<!-- 保留短横线属性名的写法也可以正常运行 -->
<div className="linea" style={{ "margin-left": actMargin }}></div>

额外优化提示：切换按钮的onClick事件记得阻止默认行为，避免触发form表单的默认提交逻辑刷新页面：

const changeHandlerL = (e) =>{
    e.preventDefault()
    setActMargin('0px');
}
const changeHandlerS = (e) => {
    e.preventDefault()
    setActMargin('77px');
}

2. 内联样式使用三元运算符的问题 #

你写的语法错误原因和上面的问题一致，多嵌套了一层大括号。JSX的style属性内完全支持三元运算符、&&短路运算符等所有合法的JS表达式。

你原来的错误写法：

<div style={{'background':{isMorning ? 'white': 'black'}}}>CIAO</div>

正确写法直接去掉值外面的大括号即可：

<div style={{ background: isMorning ? 'white' : 'black' }}>CIAO</div>

内容的提问来源于stack exchange，提问作者Matteo Possamai