react的使用问题

react的使用问题
使用react，创建网页并进行编辑。
 在页面中使用class类式组件来组织文本内容。
 要求如下：
1.让指定的文本做显示/ 隐藏的渐变动画，文本内容为“今天天气晴朗/下雨”；
2.点击“开始变化”从完全可见，到彻底消失耗时2S，消失之后，能够立马重新显示；
3.点击“再见”按钮从界面中卸载组件。

img

html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    
    <title>React Apptitle>
  head>
  <body>
    <noscript>You need to enable JavaScript to run this app.noscript>
    <div id="root">div>
    
  body>
html>

参考GPT:首先，需要安装React和React-DOM库，然后在index.js中编写代码。下面是一个示例代码，该代码创建了一个名为TextAnimation的组件。该组件包含一个文本元素，并且在点击按钮时会触发文本的渐变动画和卸载组件。

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

class TextAnimation extends React.Component {
  state = {
    visible: true,
  };

  handleClick = () => {
    this.setState({ visible: false }, () => {
      setTimeout(() => {
        this.setState({ visible: true });
      }, 2000);
    });
  };

  handleGoodbyeClick = () => {
    ReactDOM.unmountComponentAtNode(document.getElementById("root"));
  };

  render() {
    const { visible } = this.state;
    return (
      <div>
        <h1 className={visible ? "visible" : "hidden"}>
          今天天气晴朗/下雨
        </h1>
        <button onClick={this.handleClick}>开始变化</button>
        <button onClick={this.handleGoodbyeClick}>再见</button>
      </div>
    );
  }
}

ReactDOM.render(<TextAnimation />, document.getElementById("root"));

在上面的代码中，TextAnimation类继承自React.Component。该组件包含两个按钮和一个标题元素。初始状态下，标题元素的类设置为“visible”，并且visible状态为true。

当单击“开始变化”按钮时，将更新visible状态为false，这将触发标题元素的渐变动画。

  • 关于该问题，我找了一篇非常好的博客，你可以看看是否有帮助，链接：React报错总结