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日

悬赏问题

  • ¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示
  • ¥15 求三国群英传pl国战时间的修改方法
  • ¥15 matlab代码代写，需写出详细代码，代价私
  • ¥15 ROS系统搭建请教（跨境电商用途）
  • ¥15 AIC3204的示例代码有吗，想用AIC3204测量血氧，找不到相关的代码。