HTML 中的 React 三元运算符无法正确呈现 HTML
React ternary operator in HTML not rendering proper HTML
我是 React 的新手,在使用我认为简单的三元运算符时遇到了一些麻烦。我只是想默认显示一个减号,点击它时显示一个加号。我在我的 JSX 中写了一个三元运算符,并将组件的初始状态设置为 false,布尔值,并在单击时切换它。看起来很简单。
不过,该页面默认显示加号,我不确定为什么。当我点击它时,它没有改变,我在代码中的 console.log 显示布尔值。任何人都知道发生了什么事?提前致谢。这是我的组件的代码:
import React, { Component } from 'react';
class Header extends Component {
constructor(props) {
super(props);
this.state = {
showMinus: false,
};
this.changeSign = () => {
this.state.showMinus = !this.state.showMinus;
console.log('CLICKED ', this.state.showMinus);
}
};
render() {
return (
<div className="header">
<div>State: {this.state.showMinus}</div>
<div>30%</div>
<div>0000</div>
<div>85%</div>
<div>
{this.state.showMinus ? <span className="plusOrMinus" onClick={this.changeSign}> - </span>
:
<span className="plusOrMinus" onClick={this.changeSign}> + </span>}
</div>
</div>
);
}
}
export default Header;
Reactjs 是一种函数式编程风格,其理念是让您的代码保持不变。 React 有一种使用 setState function 设置状态的方法。你在这行 this.state.showMinus = !this.state.showMinus;
中所做的是改变你的状态,这不会触发 react 中的重新渲染。
将该行代码更改为:this.setState({ showMinus: !this.state.showMinus })
它应该可以工作。
您的代码几乎没有问题。要更新状态,请始终使用 this.setState
import React, { Component } from 'react';
class Header extends Component {
constructor(props) {
super(props);
this.state = {
showMinus: false,
};
changeSign = () => {
this.setState({ showMinus = !this.state.showMinus })
console.log('CLICKED ', this.state.showMinus);
}
};
render() {
return (
<div className="header">
<div>State: {this.state.showMinus}</div>
<div>30%</div>
<div>0000</div>
<div>85%</div>
<div>
{this.state.showMinus ? <span className="plusOrMinus" onClick={this.changeSign}> + </span>
: <span className="plusOrMinus" onClick={this.changeSign}> - </span>
}
</div>
</div>
);
}
}
export default Header;
我是 React 的新手,在使用我认为简单的三元运算符时遇到了一些麻烦。我只是想默认显示一个减号,点击它时显示一个加号。我在我的 JSX 中写了一个三元运算符,并将组件的初始状态设置为 false,布尔值,并在单击时切换它。看起来很简单。
不过,该页面默认显示加号,我不确定为什么。当我点击它时,它没有改变,我在代码中的 console.log 显示布尔值。任何人都知道发生了什么事?提前致谢。这是我的组件的代码:
import React, { Component } from 'react';
class Header extends Component {
constructor(props) {
super(props);
this.state = {
showMinus: false,
};
this.changeSign = () => {
this.state.showMinus = !this.state.showMinus;
console.log('CLICKED ', this.state.showMinus);
}
};
render() {
return (
<div className="header">
<div>State: {this.state.showMinus}</div>
<div>30%</div>
<div>0000</div>
<div>85%</div>
<div>
{this.state.showMinus ? <span className="plusOrMinus" onClick={this.changeSign}> - </span>
:
<span className="plusOrMinus" onClick={this.changeSign}> + </span>}
</div>
</div>
);
}
}
export default Header;
Reactjs 是一种函数式编程风格,其理念是让您的代码保持不变。 React 有一种使用 setState function 设置状态的方法。你在这行 this.state.showMinus = !this.state.showMinus;
中所做的是改变你的状态,这不会触发 react 中的重新渲染。
将该行代码更改为:this.setState({ showMinus: !this.state.showMinus })
它应该可以工作。
您的代码几乎没有问题。要更新状态,请始终使用 this.setState
import React, { Component } from 'react';
class Header extends Component {
constructor(props) {
super(props);
this.state = {
showMinus: false,
};
changeSign = () => {
this.setState({ showMinus = !this.state.showMinus })
console.log('CLICKED ', this.state.showMinus);
}
};
render() {
return (
<div className="header">
<div>State: {this.state.showMinus}</div>
<div>30%</div>
<div>0000</div>
<div>85%</div>
<div>
{this.state.showMinus ? <span className="plusOrMinus" onClick={this.changeSign}> + </span>
: <span className="plusOrMinus" onClick={this.changeSign}> - </span>
}
</div>
</div>
);
}
}
export default Header;