我正在尝试使用计数器组件动态渲染一个计数器数组,但是它们是水平渲染的,我需要它们垂直渲染。
我正在关注来自 codewithmosh.com 的 React 教程。 我已遵循所有说明并无数次检查代码。我还想指出,讲师使用的是旧版本的 React 和 Bootstrap
计数器.jsx
import React, { Component } from "react";
class Counter extends Component {
state = {
count: this.props.value
};
handleIncriment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<React.Fragment>
<span className={this.getBadgeClasses()}>{this.formatCount()}</span>
<button
onClick={this.handleIncriment}
className="btn btn-secondary btn-sm"
>
Incriment
</button>
</React.Fragment>
);
}
getBadgeClasses() {
let classes = "badge m-2 badge-";
classes += this.state.count === 0 ? "warning" : "primary";
return classes;
}
formatCount() {
const { count } = this.state;
return count === 0 ? "zero" : count;
}
}
export default Counter;
计数器.jsx
import React, { Component } from "react";
import Counter from "./counter";
class Counters extends Component {
state = {
counters: [
{ id: 1, value: 0 },
{ id: 2, value: 0 },
{ id: 3, value: 0 },
{ id: 4, value: 0 }
]
};
render() {
return (
<div>
{this.state.counters.map(counter => (
<Counter key={counter.id} value={counter.value} selected={true} />
))}
</div>
);
}
}
export default Counters;
最佳答案
如果您在 Counter
中使用 div
而不是 Fragment
,您的计数器将是 block 元素,并且会垂直呈现。
关于javascript - react 组件水平渲染而不是垂直渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59276604/