reactjs - 复杂条件渲染的react方式是什么?
问题描述
问题
我对组件的条件渲染有疑问。据我所知,有两种方法可以做到这一点。第一种方法很难看,因为当我必须执行多个 && 条件时会变得很困难。第二种方法很清楚,但是它将组件本身添加到状态中,并且很难使用状态值进行进一步的计算。例如检查错误的消息值是什么。
我已经给出了以下两种方法。请让我知道哪个会更好。除了这两种方法之外,还有另一种方法吗?
应用
这是一个简单的应用程序,它根据第一种方法中的 'err' 属性的状态和第二种方法中的 comp 属性的内容来呈现 'Main' 组件或 'Err' 组件。
最初主要组件被渲染。err 属性在 2 秒后更新为某个值,这会触发重新渲染。这时候,我想让 Err 组件渲染。
真正的应用程序是我在 componentDidMount 上有一个外部 api 调用,它可能失败或成功。我必须根据结果显示不同的组件。更新多个状态值会稍微复杂一些。为了演示的目的,我已经简化了下面的问题。
两种类型的通用步骤
npx create-react-app react-oop
组件/Err.js
import React,{Component} from 'react'
class Err extends Component {
render(){
return(
<div>
Error Component
</div>
)
}
}
export default Err
组件/Main.js
import React, {Component} from 'react'
class Main extends Component {
render(){
return(
<div>
Main Component
</div>
)
}
}
export default Main
第一种方法
应用程序.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Err from './components/Err'
import Main from './components/Main'
class App extends Component {
constructor(props){
super(props)
this.state = {
err: null
}
this.setError = this.setError.bind(this)
}
setError(){
return(
this.setState(() => {
return({
err: 'Error'
})
})
)
}
componentDidMount(){
setTimeout(this.setError, 2000)
}
render() {
return (
<div className="App">
{
this.state.err ? <Err /> : <Main />
}
</div>
);
}
}
export default App;
第二种方法
应用程序.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Err from './components/Err'
import Main from './components/Main'
class App extends Component {
constructor(props){
super(props)
this.state = {
comp: <Main />
}
this.setError = this.setError.bind(this)
}
setError(){
return(
this.setState(() => {
return({
comp: <Err />
})
})
)
}
componentDidMount(){
setTimeout(this.setError, 2000)
}
render() {
return (
<div className="App">
{this.state.comp}
</div>
);
}
}
export default App;
解决方案
我绝对推荐第一种方法。在组件的状态中存储数据 (json),而不是视图 (jsx)。
实际上有第三种方法可以充分利用两者:
在渲染之前使用 jsx 变量来编辑视图(使用您的逻辑)
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Err from './components/Err';
import Main from './components/Main';
class App extends Component {
constructor(props){
super(props);
this.state = {
err: null
};
}
// This way of writing functions saves you the binding
setError = () => this.setState({err: 'Error'})
componentDidMount(){
setTimeout(this.setError, 2000);
}
render() {
let comp = <Main />;
// Put your logic here so your returned JSX is clear
if (this.state.err)
comp = <Err />;
return (
<div className="App">
{comp}
</div>
);
}
}
export default App;
推荐阅读
- vim - autocmd source vimrc 自动失败,说无法打开文件
- python - 只有 zip 在没有 HTML 部分的情况下被附加
- javascript - 我必须连续展示三张卡片,但由于某种原因,我将卡片堆叠在一起
- fluent-ui - 如何在 Microsoft 的 mergeStyles() 实用程序中格式化“::before”伪类?
- linux - 如何获取 NFS 文件句柄,并导出其完全限定的路径并提取文件的属性?
- sql - 如何在插入后进行插入并将数据与第一次插入的结果 ID 组合
- javascript - 首次加载页面时,Material UI Autocomplete 选择默认选项
- python - Celery 在处理任务时随机无声地失败
- c# - 使用 ChoETL 将动态 JSON 格式转换为 CSV
- azure-active-directory - 将自定义角色分配给 Azure Active Directory System 托管标识