您如何将道具传递给要使用点符号使用的功能组件？

Question

我有以下代码：

import React, { useState } from 'react'

const Dropdown = ({children}) => {
    const [showMenu, setShowMenu] = useState(false)
    const handleShow = () => setShowMenu(!showMenu)
    return <div>{children}</div>
}

const Button = ({children, showMenu}) => {
    return <div onClick={() => showMenu()}>{children}</div>
}

const Menu = ({children}) => <ul>{children}</ul>
const Item = ({children}) => <li>{children}</li>

Dropdown.Button = Button
Dropdown.Menu = Menu
Dropdown.Item = Item

export default Dropdown

我想从 Dropdown 函数中传递 showMenu 以便它可以被 Button 组件和 Menu 组件访问

我怎样才能使用功能组件实现这个

Answer 1

如评论中所述，最常用的选项是：

1。反应上下文

const { useState, useContext, createContext } = window.React;

const DropdownContext = createContext({
  showMenu: false,
  setShowMenu: () => true,
});

const Dropdown = ({children}) => {
    const [showMenu, setShowMenu] = useState(false)
    
    return (
      <DropdownContext.Provider value={{ showMenu, setShowMenu }}>
        <div>{children}</div>
      </DropdownContext.Provider>
    );
}

const Button = ({children}) => {
    const { showMenu, setShowMenu } = useContext(DropdownContext);
    
    return <div onClick={() => setShowMenu(!showMenu)}>{children} {showMenu ? 'show' : 'hide'}</div>
}

const Menu = ({children}) => <ul>{children}</ul>
const Item = ({children}) => <li>{children}</li>

Dropdown.Button = Button
Dropdown.Menu = Menu
Dropdown.Item = Item

function App() {
  return (
    <div>
      <Dropdown>
        <Dropdown.Button>Button</Dropdown.Button>
      </Dropdown>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>

2。受控组件

const { useState } = window.React;

const Dropdown = ({children}) => {
    return (
      <div>{children}</div>
    );
}

const Button = ({children, onClick, showMenu}) => {
    return <div onClick={onClick}>{children} {showMenu ? 'show' : 'hide'}</div>
}

const Menu = ({children}) => <ul>{children}</ul>
const Item = ({children}) => <li>{children}</li>

Dropdown.Button = Button
Dropdown.Menu = Menu
Dropdown.Item = Item

function App() {
  // with controlled components, the state is managed in a parent component or (global) state 
  const [showMenu, setShowMenu] = useState(false)
  
  return (
    <div>
      <Dropdown showMenu={showMenu}>
        <Dropdown.Button 
          showMenu={showMenu} 
          onClick={() => setShowMenu(!showMenu)}
        >
          Button
        </Dropdown.Button>
      </Dropdown>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>

您如何将道具传递给要使用点符号使用的功能组件？

How do you pass props to functional components which are to be used using dot notation?

jsx

reactjs

1。反应上下文

2。受控组件