這是我的first.js檔案
import Second from "./second";
function ClickHandler() {
return (
<div>
<Second></Second>
</div>
);
}
function First() {
return (
<div>
<div>This is first</div>
<div>
<button onClick={ClickHandler}>Click it</button>
</div>
</div>
);
}
export default First;
這是我的second.js檔案
function Second(){
return(
<div>
<div>
This is Second
</div>
</div>
);
}
export default Second;
我想second.js在單擊按鈕時顯示檔案的內容。但這沒有按預期作業？有什么解決辦法嗎？請...
uj5u.com熱心網友回復：
import React, { useState } from 'react'
import Second from "./second";
function First() {
const [secondComponentVisibility, setSecondComponentVisibility] =
useState(false);
const ClickHandler = () => {
setSecondComponentVisibility(true)
}
return (
<div>
<div>This is first</div>
<div>
<button onClick={ClickHandler}>Click it</button>
</div>
{secondComponentVisibility && <Second/>}
</div>
);
}
export default First;
uj5u.com熱心網友回復：
function First() {
const [showSecond, setShowsecond] = useState(false);
return (
showSecond ? <SecondComponent/> : <div>
<div>This is first</div>
<div>
<button onClick={()=>setShowsecond(true)}>Click it</button>
</div>
</div>
);
}
export default First;
希望這會有所幫助
uj5u.com熱心網友回復：
first.js
import React, { useState } from react
import Second from './second'
function First() {
const [IsSecondShowing, SetIsSecondShowing] = useState(false)
return (
<div>
<div>This is first</div>
{IsSecondShowing ? <Second /> : null}
<div>
<button onClick={() => SetIsSecondShowing(prev => !prev)}>
Click it
</button>
</div>
</div>
)
}
export default First
second.js
import React from 'react'
function Second() {
return (
<div>
<div>This is Second</div>
</div>
)
}
export default Second
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/471224.html
標籤：javascript 反应 自定义组件
上一篇：檢查句子中的單詞是否也在陣列中
下一篇：點擊獲取圖片坐標