fuill 2023-03-22 15:39 采纳率: 68.2%
浏览 87
已结题

react的使用问题

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

img

<!DOCTYPE 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 App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    
  </body>
</html>
  • 写回答

2条回答 默认 最新

  • 「已注销」 2023-03-22 15:45
    关注

    参考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，这将触发标题元素的渐变动画。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 4月2日
  • 已采纳回答 3月25日
  • 创建了问题 3月22日

悬赏问题

  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统
  • ¥15 真我手机蓝牙传输进度消息被关闭了，怎么打开？(关键词-消息通知)
  • ¥15 装 pytorch 的时候出了好多问题，遇到这种情况怎么处理？
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线，如何释放宽带全部速度