我使用 ReactJS 创建了一个简单的应用程序。这个应用程序是配置文件列表,为了简单起见,在显示配置文件时我只显示名称。 我添加了按钮来显示上一个和下一个配置文件,但我在主要组件内以非常简单的方式完成了。
我的问题:
- 如何将这个按钮从一个单独的组件中分离出来
- 如何改进这些按钮的“切换”功能
// my profiles.json
let profiles = [{"name":"John"}, {"name":"Kitty"}, {"name":"Ji"}, {"name":"Mattis"}]
class Profile extends React.Component {
render() {
return (
<div>
<h1>{this.props.name}</h1>
</div>
)
}
}
class Main extends React.Component {
constructor(props) {
super(props)
this.state = {
index: 1,
disabledNext: false,
disabledPrev: false
}
}
togglePrev(e) {
let index = this.state.index - 1
let disabledPrev = false
if (index <= 0) {
e.preventDefault()
index = 0
disabledPrev = true
}
this.setState({ index: index, disabledPrev: disabledPrev, disabledNext: false })
}
toggleNext(e) {
let index = this.state.index + 1
let disabledNext = false
if (index === this.props.profiles.length - 1) {
e.preventDefault()
index = this.props.profiles.length - 1
disabledNext = true
}
this.setState({ index: index, disabledNext: disabledNext, disabledPrev: false })
}
render() {
const { index, disabledNext, disabledPrev } = this.state
const profile = this.props.profiles ? this.props.profiles[index] : null
if (profile) {
return (
<div className='profile'>
<div>
<button onClick={this.togglePrev.bind(this)} disabled={disabledPrev}>Prev</button>
<button onClick={this.toggleNext.bind(this)} disabled={disabledNext}>Next</button>
</div>
<Profile {...profile} />
</div>
)
} else {
return <span>error</span>
}
}
}
const App = () => (
<div>
<Main profiles={profiles} />
</div>
)
ReactDOM.render(
<App />,
document.getElementById('root')
)
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>
最佳答案
问题一
为了回答您的第一个问题,我只做了两个非常简单的问题 functional components 称为 Prev 和 Next。它们在 Main 组件的渲染函数(旧按钮所在的位置)中渲染。如您所见,适当的函数和值作为 props 传递。
问题二
如您所见,大部分代码已从这些函数中剥离。为了确定按钮是否应该启用或禁用,我使用了 strict equality和 strict inequality .这是基于索引是最小值 (0) 还是最大值(数组中的元素数)。
我还将 Profile 组件转换为功能组件,只是为了好玩。
希望这对您有所帮助!
// my profiles.json
let profiles = [{"name":"John"}, {"name":"Kitty"}, {"name":"Ji"}, {"name":"Mattis"}]
class Main extends React.Component {
constructor(props) {
super(props)
this.state = {
index: 1,
disabledNext: false,
disabledPrev: false
}
}
togglePrev(e) {
let index = this.state.index - 1;
let disabledPrev = (index === 0);
this.setState({ index: index, disabledPrev: disabledPrev, disabledNext: false })
}
toggleNext(e) {
let index = this.state.index + 1;
let disabledNext = index === (this.props.profiles.length - 1);
this.setState({ index: index, disabledNext: disabledNext, disabledPrev: false })
}
render() {
const { index, disabledNext, disabledPrev } = this.state
const profile = this.props.profiles ? this.props.profiles[index] : null
if (profile) {
return (
<div className='profile'>
<div>
<Prev toggle={(e) => this.togglePrev(e)} active={disabledPrev} />
<Next toggle={(e) => this.toggleNext(e)} active={disabledNext} />
</div>
<Profile {...profile} />
</div>
)
} else {
return <span>error</span>
}
}
}
function Prev(props) {
return (
<button onClick={props.toggle} disabled={props.active}>Previous</button>
);
}
function Next(props) {
return (
<button onClick={props.toggle} disabled={props.active}>Next</button>
);
}
function Profile(props) {
return (
<div>
<h1>{props.name}</h1>
</div>
);
}
const App = () => (
<div>
<Main profiles={profiles} />
</div>
)
ReactDOM.render(
<App />,
document.getElementById('root')
)
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>
关于reactjs - 如何为上一个/下一个按钮 ReactJS 创建单独的组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50725146/