So fordern Sie eine teilweise Aktualisierung in React an-Front-End-Fragen und Antworten-php.cn

So fordern Sie eine teilweise Aktualisierung in React an

藏色散人

Freigeben： 2022-12-30 13:46:26

Original

2530 Leute haben es durchsucht

So implementieren Sie eine Teilaktualisierung in einer Reaktionsanforderung: 1. Führen Sie Layout und Unterkomponenten ein. 2. Weisen Sie Routing zu, z. B. „const BasicRoute => (...)“; 4. Verwenden Sie den Tag-Wrapper „BasicLayout“ und übergeben Sie den Inhalt einfach an den Teil „this.props.children“ von „layout.js“.

So fordern Sie eine teilweise Aktualisierung in React an

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Wie kann ich eine teilweise Aktualisierung in React anfordern?

React implementiert teilweise Aktualisierung

Prozess: Eintragsdatei-> Routing-> Eintragsdatei-> js

2. Komponente-> src/layout

4. >Routing ->Routing-Teil

//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;

Nach dem Login kopieren

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>
    )
  }
}

Nach dem Login kopieren

3. Unterkomponente (Analysis.js)

)

import React from &#39;react&#39;;
import BasicLayout from &#39;../layout/layout&#39;;
export default () => {    //用BasicLayout标签包裹，内容传到layout.js的this.props.children部分
       return (<BasicLayout><h1>Analysis Page</h1></BasicLayout>)
}

Nach dem Login kopieren

[Effekt]

[Zusammenfassung]

Als ich dem Tutorial auf der offiziellen Antd-Website folgte, stellte ich fest, dass es nicht teilweise aktualisiert werden kann

Der Grund dafür ist, dass die offizielle Website das Umi-Framework verwendet . Ich habe es selbst konfiguriert, aber es gab viele Auslassungen, was dazu führte, dass Unterkomponenten nicht korrekt an das Layout übergeben wurden.
Empfohlenes Lernen: „

Video-Tutorial reagieren

“

Das obige ist der detaillierte Inhalt vonSo fordern Sie eine teilweise Aktualisierung in React an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!