Javascript React/React-spring：如何从html流中获取元素/组件？

我是web开发新手（对React也很陌生），我想知道如何使用React-spring从流中获取元素或组件

示例代码：

import React from "react";
import Hello from "./Hello"
import World from "./World"

function App() {
    return <div><Hello /><World /></div>
}

export default App;

从“React”导入React；
从“/Hello”导入Hello
从“/World”导入世界
函数App（）{
返回
}
导出默认应用程序；

从“React”导入React；
从“react spring”导入{useSpring，动画}；
函数Hello（）{
const props=useSpring({
不透明度：0，
延误：500，
发件人：{opacity:1}
})
返回

让Hello消失，然后停止流动


将世界引入流动并重新出现


我不使用React-spring，但是如果您想从流中提取元素，那么您必须使用“display:none”。
import React from "react";
import {useSpring, animated} from "react-spring";

function Hello() {

    const props = useSpring({
        opacity: 0,
        delay: 500,
        from: {opacity: 1}
    })

    return <animated.h1 style={props}>Hello</animated.h1>
}

export default Hello;

import React from "react";
import {useSpring, animated} from "react-spring";

function World() {

    const props = useSpring({
        opacity: 1,
        delay: 1000,
        from: {opacity: 0}
    })

    return <animated.h1 style={props}>World</animated.h1>
}

export default World;