是否可以将带有构造函数的类转换为定义了相同属性的功能组件？

Question

我最近开始使用

matter-js

和

react-native-game-engine

并试图找出为什么使用类定义。我在堆栈中观察了此类问题，但找不到完全相同的答案。我对迁移这部分感到困惑，尤其是：

this.entities = this.setupWorld();

。我的整个类定义如下：

import Matter from "matter-js";
import { GameEngine } from "react-native-game-engine";

export default class GameApp extends Component {
    constructor(props){
        super(props);

        this.state = {
            running: true,
            score: 0,
        };

        this.gameEngine = null;

        this.entities = this.setupWorld();
    }

    setupWorld = () => {
        let engine = Matter.Engine.create({ enableSleeping: false });
        let world = engine.world;
        world.gravity.y = 0.0;

        let bird = Matter.Bodies.rectangle( Constants.MAX_WIDTH / 2, Constants.MAX_HEIGHT / 2, Constants.BIRD_WIDTH, Constants.BIRD_HEIGHT);

        let floor1 = Matter.Bodies.rectangle(
            Constants.MAX_WIDTH / 2,
            Constants.MAX_HEIGHT - 25,
            Constants.MAX_WIDTH + 4,
            50,
            { isStatic: true }
        );

        let floor2 = Matter.Bodies.rectangle(
            Constants.MAX_WIDTH + (Constants.MAX_WIDTH / 2),
            Constants.MAX_HEIGHT - 25,
            Constants.MAX_WIDTH + 4,
            50,
            { isStatic: true }
        );


        Matter.World.add(world, [bird, floor1, floor2]);
        Matter.Events.on(engine, 'collisionStart', (event) => {
            var pairs = event.pairs;

            this.gameEngine.dispatch({ type: "game-over"});

        });

        return {
            physics: { engine: engine, world: world },
            floor1: { body: floor1, renderer: Floor },
            floor2: { body: floor2, renderer: Floor },
            bird: { body: bird, pose: 1, renderer: Bird},
        }
    }

    onEvent = (e) => {
        if (e.type === "game-over"){
            //Alert.alert("Game Over");
            this.setState({
                running: false
            });
        } else if (e.type === "score") {
            this.setState({
                score: this.state.score + 1
            })
        }
    }

    reset = () => {
        resetPipes();
        this.gameEngine.swap(this.setupWorld());
        this.setState({
            running: true,
            score: 0
        });
    }

    render() {
        return (
            <View ...
         )
    }
}

我的结果是这样的，但我认为传递道具存在问题：

export default GameApp = () =>  {
    const [running, setRunning] = useState(true)
    const [score, setScore] = useState(0)
    let gameEngine = null
    let entities = null

    useEffect(()=>{
        entities = setupWorld()
    },[])

    const setupWorld = () => {
        let engine = Matter.Engine.create({ enableSleeping: false });
        let world = engine.world;
        world.gravity.y = 0.0;

        let bird = Matter.Bodies.rectangle( Constants.MAX_WIDTH / 2, Constants.MAX_HEIGHT / 2, Constants.BIRD_WIDTH, Constants.BIRD_HEIGHT);

        let floor1 = Matter.Bodies.rectangle(
            Constants.MAX_WIDTH / 2,
            Constants.MAX_HEIGHT - 25,
            Constants.MAX_WIDTH + 4,
            50,
            { isStatic: true }
        );

        let floor2 = Matter.Bodies.rectangle(
            Constants.MAX_WIDTH + (Constants.MAX_WIDTH / 2),
            Constants.MAX_HEIGHT - 25,
            Constants.MAX_WIDTH + 4,
            50,
            { isStatic: true }
        );


        Matter.World.add(world, [bird, floor1, floor2]);
        Matter.Events.on(engine, 'collisionStart', (event) => {
            var pairs = event.pairs;

            gameEngine.dispatch({ type: "game-over"});

        });

        return {
            physics: { engine: engine, world: world },
            floor1: { body: floor1, renderer: Floor },
            floor2: { body: floor2, renderer: Floor },
            bird: { body: bird, pose: 1, renderer: Bird},
        }
    }

    const onEvent = (e) => {
        if (e.type === "game-over"){
            setRunning(false)
        } else if (e.type === "score") {
            setScore(score+1)
        }
    }

    const reset = () => {
        resetPipes();
        gameEngine.swap(setupWorld());
        setRunning(true)
        setScore(0)
    }

        return (
            <View style={style
    ...

    )
    }

Answer 1

使用功能组件props作为 FC 的第一个参数传递。

你的函数应该像这样获得 GameApp 函数：

export default GameApp = (props) =>  {
const [running, setRunning] = useState(true)
const [score, setScore] = useState(0)
let gameEngine = null
let entities = null

useEffect(()=>{
    entities = setupWorld()
},[])

const setupWorld = () => {
    let engine = Matter.Engine.create({ enableSleeping: false });
    let world = engine.world;
    world.gravity.y = 0.0;

    let bird = Matter.Bodies.rectangle( Constants.MAX_WIDTH / 2, Constants.MAX_HEIGHT / 2, Constants.BIRD_WIDTH, Constants.BIRD_HEIGHT);

    let floor1 = Matter.Bodies.rectangle(
        Constants.MAX_WIDTH / 2,
        Constants.MAX_HEIGHT - 25,
        Constants.MAX_WIDTH + 4,
        50,
        { isStatic: true }
    );

    let floor2 = Matter.Bodies.rectangle(
        Constants.MAX_WIDTH + (Constants.MAX_WIDTH / 2),
        Constants.MAX_HEIGHT - 25,
        Constants.MAX_WIDTH + 4,
        50,
        { isStatic: true }
    );


    Matter.World.add(world, [bird, floor1, floor2]);
    Matter.Events.on(engine, 'collisionStart', (event) => {
        var pairs = event.pairs;

        gameEngine.dispatch({ type: "game-over"});

    });

    return {
        physics: { engine: engine, world: world },
        floor1: { body: floor1, renderer: Floor },
        floor2: { body: floor2, renderer: Floor },
        bird: { body: bird, pose: 1, renderer: Bird},
    }
}

const onEvent = (e) => {
    if (e.type === "game-over"){
        setRunning(false)
    } else if (e.type === "score") {
        setScore(score+1)
    }
}

const reset = () => {
    resetPipes();
    gameEngine.swap(setupWorld());
    setRunning(true)
    setScore(0)
}

    return (
        <View style={style
...

)
}

Answer 2

Javascript

使用 Javascript，您无需键入属性，您可以模糊地传递它们。另外，在这里您可以看到我们解构了属性。

export const FunctionalComponent = ({something, foo, bar}) =>{ ... }

/** Usages **/
<FunctionalComponent something={true} foo="hello" bar={[{id: 1, text: "some data"}]}/>

打字稿

一般来说，最好的做法是不要执行 implicit anys，这正是 javascript 所做的。下面的示例提供了 props 的接口，因此它是硬类型的。

interface Props {
   something: boolean,
   foo: string,
   bar: {id: number, text: string}[],
   optionalThing?: string,
}

export const FunctionalComponent: React.FC<Props> = (props: Props) => { ... }