이 글은 React에서 (코드 포함) 목록을 렌더링하는 방법을 소개합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.
표시 페이지에는 일반적으로 여러 가지 표시 상태가 있습니다(목록 페이지를 예로 들겠습니다).
데이터가 비어 있습니다. 페이지가 비어 있습니다.
데이터를 가져오는 동안 오류가 발생했습니다. 오류 페이지
데이터가 정상입니다.
로드 상태
for 위의 세 가지 경우에, React는 목록을 렌더링할 때 해당 뷰를 정확하게 판단하고 렌더링해야 하는데, 이는 vue의 v-if, v-show 및 기타 프레임워크에서 제공하는 API와 달리, React의 조건부 렌더링은 다음과 같습니다. 예를 들어, React 문서에서 언급한 대로 if/else, && 및 3항 등이 있습니다.
물론 위의 방법은 일반적으로 사용되는 방법이지만 다양한 문제도 있습니다. , 조건 분기와 같은 것이 너무 많으면 코드가 점점 더 지저분해집니다. 실제로 이 세 가지 솔루션은 유사합니다. 렌더링 수명 주기에서 해당 판단을 내리세요. 그러나 삼항 연산자와 단락 연산자는
if/elseclass List extends Component {
static propTypes = {
status: PropTypes.oneOf(['loading', 'error', 'success', 'empty'])
}
render () {
const { status } = this.props
if (status === 'loading') {
return <div>
加载状态
</div>
}
if (status === 'error') {
return <div>
错误状态
</div>
}
if (status === 'success') {
return <div>
成功状态
</div>
}
if (status === 'empty') {
return <div>
空状态
</div>
}
}
}
Render(IF) 구성 요소
function Render ({ if: cond, children }) { return cond ? children : null }
에서 v-if에 대응할 수 있습니다
위는 간단한 Render 컴포넌트로 사용하면 이렇습니다class List extends Component { static propTypes = { status: PropTypes.oneOf(['loading', 'error', 'success', 'empty']) } render () { const { status } = this.props return ( <div> <Render if={status === 'loading'} > 加载状态 </Render> <Render if={status === 'error'} > 错误状态 </Render> <Render if={status === 'success'} > 成功状态 </Render> <Render if={status === 'empty'} > 空状态 </Render> </div> ) } }
class List extends Component { static propTypes = { status: PropTypes.oneOf(['loading', 'error', 'success', 'empty']) } render () { const { status } = this.props return ( <div> {(() => { switch (status) { case 'loading': return <div>加载状态</div> case 'error': return <div>错误状态</div> case 'success': return <div>成功状态</div> case 'empty': return <div>空状态</div> } })()} </div> ) } }
const withList = WrappedComponent => { return class PP extends Component { render() { const { status } = this.props switch (status) { case 'loading': return <div>加载状态</div> case 'error': return <div>错误状态</div> case 'success': return <WrappedComponent {...this.props}/> case 'empty': return <div>空状态</div> } } } }
@withList class List extends Component { static propTypes = { status: PropTypes.oneOf(['loading', 'error', 'success', 'empty']) } render () { return ( <div> 成功页面 </div> ) } }
위 내용은 React에서 목록을 렌더링하는 방법 소개(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!