[英]How to vertically and horizontally align child components 'on top' of parent in React Native?
[英]react components rendering horizontally instead of vertically
我正在嘗試使用計數器組件動態渲染一系列計數器,但是它們是水平渲染的,我需要它們垂直渲染。
我正在關注 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
,您的計數器將是塊元素,並將垂直呈現。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.