英文:
Render component on button click to change page view with useState (or otherwise) in React
问题
我已经为我的作品集制作了一个登陆页面，我想让页面执行一个过渡动画（比如淡出/淡入，但我可以稍后处理），然后在按钮点击时渲染实际作品集组件而不是我的登陆页面。
我开始尝试编写一个函数，但对如何实现这一点有点迷茫。
到目前为止，我有这个作为我的 App 设置，但是无法弄清楚如何实现状态更改以渲染 Portfolio 组件而不是来自 App.js 的 HTML。
英文:
I've made a landing page for my portfolio and I'd like to have the page perform a transition animation (like a fadeout/In, but I can get to that later) then render the component of my actual portfolio instead of my landing page on the button click.
I started trying to write a function but am a bit lost with how to implement this.
I have this as my App setup so far but can't figure out how to implement the state change to render the Portfolio component instead of the HTML from App.js
import React, { useState } from "react";
import "./App.css";
// import Portfolio from "./Portfolio"
function App() {
//States
// const [view, setView] = useState();
// function viewPortfolio (
// )
return (
<div className="App">
<div className="title">
<h1 className="title maintext">Josh Bellingham</h1>
<h2 className="title subtext">Junior Web Developer</h2>
<button className="title btn">
<span>Welcome</span>
</button>
</div>
<div className="sun">
<img className="sun-img" src="Sun.png" alt="Sun" />
<div className="sun-ray r-one"></div>
<div className="sun-ray r-two"></div>
<div className="sun-ray r-three"></div>
<div className="sun-ray r-four"></div>
</div>
<div className="waves">
<img className="wave-1" src="Wave 1 (1).png" alt="Wave"></img>
<img className="wave-2" src="Wave 2 (1).png" alt="Wave"></img>
<img className="wave-3" src="Wave 3 (1).png" alt="Wave"></img>
</div>
</div>
);
}
答案1
得分: 0
只需在代码中定义一个函数，并使用箭头函数调用它，或者可以使用 bind 函数。ps，最好使用 'useMemo' 或 'useCallback' 钩子，具体取决于你的需求。
function App() {
const [count, setCount] = useState(0);
// 定义函数
const testFunction = () => {
console.log("在这里调用函数");
setCount(10); // 或者你想调用的其他内容
}
return (
<div className="App">
{/* 调用函数 */}
<button onClick={() => testFunction()}>测试按钮</button>
<p>{count}</p>
</div>
)
}
你可以使用 onClick 方法调用任何函数。如果只是将函数传递给 onClick，它将在组件渲染时调用你的函数，而我们暂时不希望发生这种情况，因此我们用箭头函数进行了包裹。每当调用一个函数并且它改变组件的任何状态时，都会引起重新渲染，所以如果想重新渲染，你应该改变一些状态。
在我编写的代码中，当你点击“测试按钮”时，你会调用 testFunction，并且它会将 count 状态更改为 10，这将引起重新渲染，我们可以像我在段落中使用它那样使用该状态。
你可以在 events，hooks，lifecycle 获取更多信息。
英文:
just define a function in your code and call it with arrow functions or you can use the bind function. ps, it is good to use 'useMemo' or 'useCallback' hooks depending on your
function App() {
const [count, setCount] = useState(0);
//define function
const testFunction = () => {
console.log("you can call a function here ");
setCount(10); // or whatever you want to call
}
return (
<div className="App">
{/* call function */}
<button onClick={() => testFunction()}>test btn</button>
<p>{count}</p>
</div>
)
}
you can call any function with onClick method. if you just pass the function to the onClick, it will call your function when the component is being rendered and we don't want that for now, we wrap that in the arrow-function. every time you call a function and it changes any state in your component, it will cause re-rendering, so if you want to re-render you should change some states.
in the code I wrote when you click on the test btn you call testFunction and it will change the count state to 10 and it will cause re-rendering, we can use that state as I used it in the paragraph
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论