Question

我收到一条错误消息，指出setstate只能在已安装或安装组件上更新。我其实想要切换一些内容的显示。请帮帮我。这是代码。我想切换布尔＆＃34;显示＆＃34;是真还是假。如果为true，则应显示Todolist，如果为false，则不应显示Todolist，而应显示Footer。请原谅我严重破坏这个问题。但请告诉我该做什么以及该怎么做。谢谢！

import React, {Component} from "react";
import ReactDOM from "react-dom";
import "./index.css";
import TodoList from "./TodoList";
import NavbarTodo from "./NavbarTodo";
import Footer from "./Footer";
import "bootstrap/dist/css/bootstrap.css";

var destination = document.querySelector("#container");
var navdest = document.querySelector(".putnavbarhere");
var clicked=false;


class index extends Component{
  constructor() {
    super();
    this.state = {show: true};
    this.handleAbout = this.handleAbout.bind(this);
  }

  handleAbout(){
    this.setState({
      show:false
    })
    clicked=!clicked
    if(clicked){
      ReactDOM.render(
        <Footer />,
        document.querySelector("#toast")
      )
      }
      else{
        ReactDOM.render(
          <p> </p>,
          document.querySelector("#toast")
        )
    };

  }
}


var indObj = new index();


ReactDOM.render(
    <div>
       <TodoList show={indObj.state.show}/>
    </div>,
    destination

);

ReactDOM.render(
    <NavbarTodo clicked={indObj.handleAbout}/>,
    navdest
);

Answer 1

您需要的是一些条件渲染。

https://reactjs.org/docs/conditional-rendering.html

你的onClick函数会在{/ 1}之间切换为真/假。

this.state.show

react中的setState只能更新已安装或安装的组件

1 个答案: