所以我试图通过构建一个简单的待办事项列表应用程序来学习React.js，但出于某种原因，当我将var currentClaims = await UserManager.GetClaimsAsync(...);
的样式声明为对象时，我会得到一些有趣的行为。这是我的TodoListItem.js文件的代码：
<td>每个元素都有一个键和一个动作值，但是当我通过创建import React, { Component } from 'react'
export default class TodoListItem extends Component {
constructor(props) {
super(props)
this.state = {
isEditing: false
}
}
onEditClick() {
if(this.isEditing) {
this.setState({ isEditing: false})
}
else {
this.setState({isEditing: true})
}
}
renderActionSection() {
if (!this.state.isEditing) {
return (
<td>
<div className="btn-group" role="group">
<button onClick={this.onEditClick.bind(this)} className="btn btn-default">Edit</button>
<button className="btn btn-danger" >Delete</button>
</div>
</td>
)
} else {
return (
<td>
<div className="btn-group" role="group">
<button onClick={this.onSaveClick.bind(this)} className="btn btn-primary">Save</button>
<button className="btn btn-danger" >Delete</button>
</div>
</td>
)
}
}
renderTaskSection() {
const {task, isCompleted} = this.props
console.log(task + ' ' +isCompleted)
const taskStyle = {
color: isCompleted ? 'green' : 'red',
cursor: 'pointer'
}
return(
<td style={taskStyle}>{task}</td>
)
}
onSaveClick() {
this.setState({isEditing: false})
}
render() {
return (
<tr>
{this.renderTaskSection()}
{this.renderActionSection()}
</tr>
)
}
}
并将其值赋给const来更改ActionSection的样式时：
<td> const taskStyle = {
color: isCompleted ? 'green' : 'red',
cursor: 'pointer'
}
return(
<td style={taskStyle}>{task}</td>
)
始终为绿色或红色，具体取决于我在三元语句中放在另一个值之前的值。
你知道发生了什么吗？我怎么能解决这个问题？
编辑： 经过仔细检查，似乎颜色样式仅适用于我放在列表中的新元素，我将其用作解决问题的解决方法，方法是不事先将任何TODOS放入列表中。