javascript - 如何在 React 中为项目添加过渡效果

Question

我正在学习 React 并遇到了问题。我的项目随机生成一个从 1 到 3 的数字，并根据该数字显示不同的内容。一切正常，但我想补充一点，当我单击时，每次单击按钮时都会通过更改不透明度来显示内容

我该怎么办？我试图更改 onClick 中的 setOpacity 参数但没有得到结果

我的代码：

主.js：

import React from "react";
import Random from "./Random";
class Main extends React.Component {
constructor() {
  super();
  this.state = {
    value:  0
  };
}
changeValue = () => {
  const min = Math.ceil(1);
  const max = Math.floor(4);
  let xd = Math.floor(Math.random() * (max - min)) + min;
  this.setState({ value: xd });
  console.log(this.state.value);
};
render() {
  return (
    <div onLoad={this.changeValue} className="card">
      <Random data={this.state.value} change={this.changeValue.bind(this)} />
    </div>
  );
}
}

export default Main;

随机.js：

import React, { useState } from "react";
import sad from './sad.png';
import angry from './angry.png';
import haha from './haha.png';
const Random = (props) => {
 


  if (props.data === 0) {
    return (
      <div className="macius"  >
        <h1>Random option</h1>
        <div>
          <span>
            <h3>Click Losuj!</h3>
            <button onClick={props.change}>LOSUJ</button>
          </span>
        </div>
        
      </div>
    );
  } else if (props.data === 1) {
    return (
        <div className="maciek">
        <h1>Angry</h1>
        <div>
          <span>
          <img src={angry} alt="smutny"/>
            <button onClick={props.change}>LOSUJ</button>
          </span>
        </div>
        
      </div>
    );
  } else if (props.data === 2) {
    return (
        <div className="maciek">
        <h1>Sad</h1>
        <div>
          <span>
            <img src={sad} alt="smutny"/>
            <button onClick={props.change}>LOSUJ</button>
          </span>
        </div>
        
      </div>
    );
  } else if (props.data === 3) {
    return (
        <div className="maciek">
        <h1>HaHa</h1>
        <div>
          <span>
          <img src={haha} alt="smutny"/>
            <button onClick={props.change}>LOSUJ</button>
          </span>
        </div>
        
      </div>
    );
  } else {
    return (
      <div>
        <h1>error</h1>
      </div>
    );
  }
};

export default Random;

标签： javascriptreactjs