Question

在状态下，我正在设置一张照片的背景图像，我想做2个按钮，一个按钮将背景图像更改为另一张照片，另一个按钮将背景图像设置为第一张照片。这是我的代码片段：

\\index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "semantic-ui/dist/semantic.min.css";
import logo1 from "./modules/images/one.jpg";

ReactDOM.render(
  <App bgImage={`url(${logo1})`} />,
  document.getElementById("root")
);

\\App.js
import React, { Component } from "react";
import "./App.css";
import NavBar from "./modules/NavBar";
import logo1 from "./modules/images/one.jpg";
import logo2 from "./modules/images/night.jpg";


class App extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      bgImage: props.bgImage //so here I set the backroundImage with logo1, because I want to logo1 to be on the start of application, but when I change to logo2 I want to have that logo2 even when I refresh page ( but when I do it, constructor of App is setting it to the logo1. So maybe, can I save that logo even when the App is reloading to get the latest logo ?
    };
  }

  ChangeToLightMode = e => {
    this.setState({
      bgImage: `url(${logo1})`
    });
  };

  ChangeToDarkMode = e => {
    this.setState({
      bgImage: `url(${logo2})`
    });
  };

  render() {
    return (
        <div
            style={{
              display: "flex",
              minHeight: "100vh",
              flexDirection: "column",
              backgroundImage: this.state.bgImage,
              height: "100%",
              width: "100%"
            }}
          >
            <NavBar
              ChangeToDarkMode={this.ChangeToDarkMode}
              ChangeToLightMode={this.ChangeToLightMode}
            />
    );
  }
}

export default App;

\\NavBar.js

import React, { Component } from "react";

class NavBar extends Component {

  render() {

    return (
      <div>
        <Menu fixed="top" inverted>

          <Menu.Menu position="right">
            <Menu.Item onClick={this.props.ChangeToDarkMode}>
              DarkMode
            </Menu.Item>
            <Menu.Item onClick={this.props.ChangeToLightMode}>
              LightMode
           </Menu.Item>
          </Menu.Menu>
        </Menu>
      </div>
    );
  }
}

因此，我实现了一种可以更改背景图片的方法，但是当我在应用程序中单击例如徽标并调用App的构造函数时，即使我有第二张照片，我也将bgImage设置为第一张照片，但我知道。但是我只希望在应用程序的开始时在构造函数中设置第一张照片，之后我要根据使用的方法获得照片。那么我应该将bgImage状态存储在某个地方，并在App构造函数中对其进行处理吗？

Answer 1

如果需要在渲染{em> bgImage之前确定App的默认值，那么通常可以通过将prop传递到组件中来实现。例如

<App bgImage={`url(${logo1})`} />

然后在构造函数中，可以将其设置为默认状态

class App extends Component { constructor(props) { super(props); this.state = { bgImage: props.bgImage }; } }

更改backgroundImage时管理状态

1 个答案: