> 웹 프론트엔드 > 프런트엔드 Q&A > 반응에서 부분 새로 고침을 요청하는 방법

반응에서 부분 새로 고침을 요청하는 방법

藏色散人
풀어 주다: 2022-12-30 13:46:26
원래의
2531명이 탐색했습니다.

React 요청 부분 새로 고침 구현 방법: 1. 레이아웃 및 하위 구성 요소 소개 2. "const BasicRoute = () => (...)"와 같은 라우팅, 코드 할당 3. 프로젝트 링크 정의 ; 4. "BasicLayout" 태그 래퍼를 사용하여 "layout.js"의 "this.props.children" 부분에 콘텐츠를 전달하세요.

반응에서 부분 새로 고침을 요청하는 방법Key points</p>)<p></p><div class=

//import React from &#39;react&#39;; 引入类
//import { Component } from &#39;react&#39;;  引入对象
import React, { Component } from &#39;react&#39;;
import {HashRouter, Route, Switch} from &#39;react-router-dom&#39;;

//引入布局和子组件
import BasicLayout from &#39;../layout/layout&#39;;
import Analysis from &#39;../coms/Analysis&#39;;
import Monitor from &#39;../coms/Monitor&#39;;
import Workplace from &#39;../coms/Workplace&#39;;

//分配路由
const BasicRoute = () => (
    <HashRouter>
        <Switch>
            <Route exact path="/" component={BasicLayout}/>
            <Route exact path="/Analysis" component={Analysis}/>
            <Route  path="/Monitor" component={Monitor}/>
            <Route  path="/Workplace" component={Workplace}/>
        </Switch>
    </HashRouter>
);

export default BasicRoute;
로그인 후 복사

3.

)

import React, { Component } from &#39;react&#39;;
import  {Layout ,Menu,Icon} from &#39;antd&#39;;
import { Router, Route, Link,HashRouter } from &#39;react-router-dom&#39;
import &#39;antd/dist/antd.min.css&#39;
import BasicRoute from &#39;../routes/router&#39;;

const { Header, Footer, Sider, Content } = Layout;

export default class BasicLayout extends Component {
  render() {
    return (
        <Layout>
        <Sider width={256} style={{ minHeight: &#39;100vh&#39;, color: &#39;white&#39; }}>
            
            <Menu theme="dark" mode="inline" >
                {/*定义了项目的link,会按照路由走*/}
                <Menu.Item><Link to="/Analysis">Item1</Link></Menu.Item>
            </Menu>
            
        </Sider>
        <Layout >
          <Header style={{ background: &#39;#fff&#39;, textAlign: &#39;center&#39;, padding: 0 }}>Header</Header>
          <Content style={{ margin: &#39;24px 16px 0&#39; }}>
            <div style={{ padding: 24, background: &#39;#fff&#39;, minHeight: 360 }}>
              {/*Analysis.js文件引用了BasicLayout,并把自己的全部子节点(子组件)传过来*/}
              {this.props.children}
              
            </div>
          </Content>
          <Footer style={{ textAlign: &#39;center&#39; }}>Ant Design ©2018 Created by Ant UED</Footer>
        </Layout>
      </Layout>
    )
  }
}
로그인 후 복사

[요약]

antd 공식 홈페이지 튜토리얼을 따라가다가 부분적으로 새로고침이 안되는 걸 발견했습니다
이유는 공식 홈페이지가 umi 프레임워크를 사용하기 때문입니다 . 제가 직접 구성했는데 누락된 부분이 많아 하위 구성요소가 레이아웃에 제대로 전달되지 않는 현상이 발생했습니다.

추천 학습: "

react 비디오 튜토리얼반응에서 부분 새로 고침을 요청하는 방법

위 내용은 반응에서 부분 새로 고침을 요청하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿