Heim  >  Artikel  >  Web-Frontend  >  So fordern Sie eine teilweise Aktualisierung in React an

So fordern Sie eine teilweise Aktualisierung in React an

藏色散人
藏色散人Original
2022-12-30 13:46:262524Durchsuche

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 'react'; 引入类
//import { Component } from 'react';  引入对象
import React, { Component } from 'react';
import {HashRouter, Route, Switch} from 'react-router-dom';

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

//分配路由
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;

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

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

[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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn