Reactjs 改变<；svg>；使用传递的数据和弹簧的高度

我是初学者。我试了好几个小时，但还是不明白

我从

App.js

获得了布尔值的（道具）。是否按下按钮

我想： 如果为false，我想将svg高度更改为300px，否则更改为20px。它应该是动画的。如何将动画与spring绑定

我应该像navAnimation一样制作常量吗

这是App.js

import React，{Component，useState}来自'React'；
从“react spring”导入{useSpring，动画}；
从“/components/Subject”导入主题；
从“/components/Nav”导入导航；
从“/components/Sidebar”导入侧栏；
导入“./components/event.js”；
常量应用=（）=>{
const[isNavOpen，setNavOpen]=useState（false）；
const navAnimation=useSpring({
高度：isNavOpen？0:50，
不透明度：isNavOpen？0:1
})
返回(
setNavOpen（！isNavOpen）}>open
);
}
导出默认应用程序；

这是Sidebar.js

const侧边栏=（道具）=>{
报税表（
乱数假文
);
}
导出默认边栏；

如果您想在基于布尔值的两个值之间进行更改，可以使用三元值

boolean？ValueIfTrue：ValueIfValse

---

可以使用大括号将表达式嵌入jsx中。根据支撑键的名称，高度将设置为300或20。我建议设置某种类型的单位，而不仅仅是300，即300px

祝你在建设的其他项目好运

const Sidebar = (props) => {

return( 
    <div id="sidebar">
        lorem ipsum
        <svg width="300" height={this.props.keyFromApp ? "300": "20"}>
            <rect width="10vh" height="20" x="10" y="10" />
        </svg>
    </div>  
);
}

---

谢谢你的回答。但我还是解决不了。一开始它是300px，但当我按下按钮时，它并没有回到20px。我一直在寻找和尝试。谢谢尝试使用setState（true）而不是setState（false）。如果变量是有状态的，则当父类状态更改时，它应该导致子类的重新引发。