我對 React 相當陌生，并試圖編輯前同事的代碼（因此是非傳統的 React 風格）。
單擊單個按鈕（“Dropdown”）時，我需要回傳一系列按鈕（此處為“Hello”和“Goodbye”）。為了使這一點更具動態性，我想從函式 (dropdownDetails) 而不是 [show,setShow] 變數等中回傳這些按鈕。
當我運行此代碼時，控制臺顯示觸發了 dropdownDetails，但 UI 中沒有出現“Hello”和“Goodbye”。我究竟做錯了什么？
提前致謝！
///// In base.js:
const e = React.createElement;
///// in page_body.js:
function pageBody(props) {
const dropdownDetailsWrap = (props) => (e) => {
console.log("Wrap triggered")
dropdownDetails()
}
function dropdownDetails() {
console.log("dropdownDetails useEffect triggered")
return(
e("button",{type:"button"},"Hello"),
e("button",{type:"button"},"Goodbye")
);
};
const pageBody = () => (e) => {
return(
e("button", {type:"button",onClick:dropdownDetailsWrap(),className:'btn'},"Dropdown")
)}
}
ReactDOM.render(e(pageBody), document.querySelector('#page_body'));
注意：我知道有更優雅的方式來制作下拉選單，尤其是使用包。現在只是想了解純 React 的基礎知識。
uj5u.com熱心網友回復：
如果您使用 react 的 useState 鉤子，您可能可以這樣做。
如果不使用狀態，我懷疑我們可以做到這一點。
我正在粘貼下面的代碼，請在代碼和框上查看以了解更多資訊。
這是鏈接鏈接
代碼 ：
import React, { useState } from "react";
const e = React.createElement;
export default function App() {
return (
<div className="App">
<PageBody />
</div>
);
}
function PageBody(props) {
var buttonsToShow;
const [showButtons, setshowButtons] = useState(false);
const [buttons, setButtons] = useState([]);
const dropdownDetailsWrap = (props) => {
console.log("Wrap triggered");
buttonsToShow = dropdownDetails();
setButtons(buttonsToShow);
setshowButtons(true);
};
function dropdownDetails() {
console.log("dropdownDetails useEffect triggered");
return [
e("button", { type: "button", key: 1 }, "Hello"),
e("button", { type: "button", key: 2 }, "Goodbye")
];
}
var dropbutton = () => {
return e(
"button",
{ type: "button", onClick: dropdownDetailsWrap, className: "btn" },
"Dropdown"
);
};
return (
<div>
{dropbutton()} <br /> {showButtons && buttons}
</div>
);
}
現在，我知道這不是最好的版本，但您仍然可以清理此代碼并使用邏輯。此外，通過使用狀態，您的代碼不會變成靜態，而且您可以自定義更多內容，
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/397228.html
標籤：javascript 反应 反应钩子