在功能组件中返回 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，而且您可以自定义更多的东西，