我试图在 React 中切换一个类(仅在 else 语句中)。
class Inf extends React.Component {
constructor() {
super();
this.state = {
pizzaData: data
}
}
renderList(info){
const list = this.state.pizzaData.map((entry, index) => {
if (entry.occupied==true){
return <li class="coloring" key={index}>Seat: {entry.seat}{entry.row}</li>;
}
else{
return <li class="colored" key={index}>Seat: {entry.seat}{entry.row}</li>;
}
});
return(
<ul>{list}</ul>
)
}
现在,查看一些文档后,我不确定如何执行此操作。我知道 li 上需要有一个“切换”,并且(我认为)在 this.state={:
下面有类似的东西pizzaData:data
},
handleClick function(
但我不确定。
最佳答案
我创建了一个简单的示例,说明如何更新代码,也包含两个组件(类似于 @THEtheChad 的想法),但不使用 context
因为根据 react docs如果您希望应用程序稳定,则不鼓励直接使用 context
。如果应用程序中的 state
和 props
管理变得过于复杂,您可以包含 redux
(其内部也使用 context
),但目前我不包括 redux
因为在这个简单的情况下它可能过于复杂。
这里是 PizzaList
,其 state
上有 pizzas
。该组件将呈现 PizzaItem
组件并向下传递回调,以便每个 PizzaItem
可以在单击时通知其父级 (PizzaList
)。 PizzaList
负责在单击时切换 PizzaItem
。
class PizzaList extends React.PureComponent {
state = {
pizzas: []
}
componentDidMount() {
// fetch data about pizzas via an API and perform this.setState
this.setState({ pizzas: [{ seat: 20, occupied: false }, { seat: 10, occupied: true }, { seat: 30, occupied: true }] });
}
handlePizzaItemClick = (pizzaInd) => {
this.setState((prevState) => {
// find clicked pizza and toggle its occupied property
const pizzas = prevState.pizzas.map((pizza, ind) => {
if (ind === pizzaInd)
return { ...pizza, ...{ occupied: !pizza.occupied } };
return pizza;
});
return { pizzas: pizzas };
});
}
render () {
return (
<ul>
{this.state.pizzas.map((pizza, index) =>
<PizzaItem
onClick={this.handlePizzaItemClick}
index={index}
pizza={pizza}
/>)}
</ul>
);
}
}
PizzaItem
是一个没有任何状态的简单函数组件。
const PizzaItem = ({ index, pizza, onClick }) => {
const { seat, row, occupied } = pizza;
const pizzaClassName = occupied ? 'coloring' : 'colored';
return (
<li key={index}
className={pizzaClassName}
onClick={() => onClick(index)}>
Seat: {seat} {row}
</li>
);
}
这是 codesandbox 上的一个工作示例.
关于javascript - 在 if else 语句中切换类-React,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48045679/