Javascript 在类组件中展开div

我遵循此

react flip toolkit

，以便为组件中的

扩展设置动画：

这是教程代码：

import React, { useState } from 'react'
import { Flipper, Flipped } from 'react-flip-toolkit'

const AnimatedSquare = () => {
  const [fullScreen, setFullScreen] = useState(false)
  const toggleFullScreen = () => setFullScreen(prevState => !prevState)

  return (
    <Flipper flipKey={fullScreen}>
      <Flipped flipId="square">
        <div
          className={fullScreen ? 'full-screen-square' : 'square'}
          onClick={toggleFullScreen}
        />
      </Flipped>
    </Flipper>
  )
}

---

---

如何在类组件中声明

AnimatedSquare（）

，并将上面的目标

封装在

和

中？

我已经为您将示例转换为基于类的组件。您应该能够从本例中计算出其余部分：

import React，{Component}来自“React”；
从“react dom”导入react dom；
从“react flip toolkit”导入{Flipped，Flipper}；
导入“/styles.css”；
类AnimatedSquare扩展组件{
状态={
全屏显示：错误
};
切换全屏（）{
this.setState（{fullScreen:！this.state.fullScreen}）；
}
render（）{
const{fullScreen}=this.state；
返回(
);
}
}
ReactDOM.render（，document.querySelector（“#root”）；

*{
框大小：边框框；
}
身体{
显示器：flex；
证明内容：中心；
对齐项目：居中；
最小高度：100vh；
}
.广场{
宽度：5雷姆；
身高：5雷姆；
光标：指针；
背景图像：线性梯度(
45度，
rgb（121113234），
rgb（97、71、182）
);
}
.全屏广场{
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
光标：指针；
背景图像：线性梯度(
45度，
rgb（121113234），
rgb（97、71、182）
);
}

我已经为您将示例转换为基于类的组件。您应该能够从本例中计算出其余部分：

import React，{Component}来自“React”；
从“react dom”导入react dom；
从“react flip toolkit”导入{Flipped，Flipper}；
导入“/styles.css”；
类AnimatedSquare扩展组件{
状态={
全屏显示：错误
};
切换全屏（）{
this.setState（{fullScreen:！this.state.fullScreen}）；
}
render（）{
const{fullScreen}=this.state；
返回(
);
}
}
ReactDOM.render（，document.querySelector（“#root”）；

*{
框大小：边框框；
}
身体{
显示器：flex；
证明内容：中心；
对齐项目：居中；
最小高度：100vh；
}
.广场{
宽度：5雷姆；
身高：5雷姆；
光标：指针；
背景图像：线性梯度(
45度，
rgb（121113234），
rgb（97、71、182）
);
}
.全屏广场{
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
光标：指针；
背景图像：线性梯度(
45度，
rgb（121113234），
rgb（97、71、182）
);
}

class Field extends Component {
  constructor(props) {
    super(props);

    this.state = {
      players:[],
    };
  }

getPlayersByPosition = (players, position) => {
    return players.filter((player) => player.position === position);
  };

render() {
    const { players } = this.props;
    if(players){
      return (
       <div className="back">
          <div className="field-wrapper" >
            <Output output={this.props.strategy} />

            // this is the target div I want to expand
            <div className="row"> 
               {this.getPlayersByPosition(players, 5).map((player,i) => (
                    <Position key={i} >{player.name}</Position>
                ))} 
            </div>

          </div>
        </div>
      );
  }else{
    return null}
  }
}

export default Field;