Question

我在反应中读到了严格模式，我认为这很清楚。但是我的代码行为很奇怪。在index.js中，我删除了React.StrictMode标记，因此看起来像这样：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(  
    <App />,
    document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

App.js仅在渲染默认的home组件时渲染一次（正确）。这是home组件的示例：

import React, { Component } from 'react';

class Home extends Component {  

    render() {
        return (  
            <div>
                <p>This is home page!</p>        
            </div>
        );
    }
}

export default Home;

和应用程序组件：

import React, { Component, Fragment } from 'react';
import './App.css';
import './components/header';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Header from './components/header';
import Footer from './components/footer';
import Home from './components/home';
import CreateGym from './components/create-gym';
import Login from './components/authentication/login';

class App extends Component {

    constructor() {
        super();
        this.state = {
            showHeaderAndFooter: true
        };
    }

    callbackFunction = (childData) => {
        this.setState({showHeaderAndFooter: childData})
    };

    Container = () => (
        <div>
            { this.state.showHeaderAndFooter && <Header parentCallback = {this.callbackFunction}/>} 
            <div className="container">
                <Route exact path='/' component={Home} />
                <Route path="/createGym" component={CreateGym} />
                <Route path="/login" component={Login} />
            </div>
            { this.state.showHeaderAndFooter && <Footer /> } 
        </div>
    )

    render() {
        console.log(this.state.showHeaderAndFooter);
        return (
            <BrowserRouter>
                <Switch>
                    <Fragment>
                        { <Route component={this.Container}/> }
                    </Fragment>
                </Switch>
            </BrowserRouter>  
        );
    }
}

export default App;

最后，这是我的标头组件：

import React, { Component } from 'react';
import { Nav, Navbar, Button } from "react-bootstrap";

class Header extends Component {

    sendData = () => {
        this.props.parentCallback(false);
    }

    render() {
        return (  
            <Navbar bg="dark" variant="dark">
                <Nav className="mr-auto">
                    <Button href="/createGym" onClick={this.sendData}>Create gym</Button>
                </Nav>           
            </Navbar>
        );
    }
}

export default Header;

渲染问题是当我接近CreateGym组件时（代码与home组件非常相似）。创建我的按钮位于我的标题组件中。因此，基本上，标头组件是子组件，而应用程序组件是父组件。我想在路由到createGym路由时隐藏页眉和页脚。因此，当我单击创建健身房的按钮时，我想将boolean = false传递给应用程序组件。当我将数据从子级传递到父级时，应用程序组件中的render方法适用于第一种方法，但此后第二次呈现，并将我之前的值覆盖为true。

为什么我的代码第二次呈现？错误在哪里？

我的React App.js组件渲染两次，但是严格模式关闭

0 个答案: