在功能組件中返回 React 元素

Question

我對 React 相當陌生，並試圖編輯前同事的代碼（因此是非傳統的 React 風格）。

單擊單個按鈕（“下拉菜單”）時，我需要返回一系列按鈕（此處為“Hello”和“Goodbye”）。 為了使這更加動態，我想從 function （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 的基礎知識。

Answer 1

如果您使用 react 的 useState 鈎子，您可能可以這樣做。

如果不使用 state，我懷疑我們能做到這一點。

我正在粘貼下面的代碼，請在代碼沙箱上查看以了解更多信息。

這是鏈接 鏈接

代碼：

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>
  );
}

現在，我知道這不是最好的版本，但您仍然可以清理此代碼並使用邏輯。 此外，通過使用 state，您的代碼不會變成 static，而且您可以自定義更多的東西，