如何向通过点表示法使用的React函数式组件传递props

你这个是典型的React复合组件模式使用场景，通过Context在复合组件树内共享状态即可实现需求，无需额外透传props，修改后的完整代码如下：

import React, { useState, createContext, useContext } from 'react'

// 创建仅内部使用的Context共享状态
const DropdownContext = createContext()

const Dropdown = ({children}) => {
    const [showMenu, setShowMenu] = useState(false)
    const handleShow = () => setShowMenu(!showMenu)
    // 用Provider包裹子组件，传入需要共享的状态和方法
    return (
        <DropdownContext.Provider value={{showMenu, toggleMenu: handleShow}}>
            <div>{children}</div>
        </DropdownContext.Provider>
    )
}

const Button = ({children}) => {
    // 直接从Context取切换显隐的方法
    const { toggleMenu } = useContext(DropdownContext)
    return <div onClick={toggleMenu}>{children}</div>
}

const Menu = ({children}) => {
    // 直接从Context取显隐状态控制菜单渲染
    const { showMenu } = useContext(DropdownContext)
    return showMenu ? <ul>{children}</ul> : null
}
const Item = ({children}) => <li>{children}</li>

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

export default Dropdown

使用示例 #

外部使用时无需手动管理状态，API非常简洁：

const App = () => {
  return (
    <Dropdown>
      <Dropdown.Button>点击展开菜单</Dropdown.Button>
      <Dropdown.Menu>
        <Dropdown.Item>选项1</Dropdown.Item>
        <Dropdown.Item>选项2</Dropdown.Item>
        <Dropdown.Item>选项3</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  )
}

该方案所有状态逻辑都封装在Dropdown内部，不需要层层透传props，符合复合组件的设计规范。

内容的提问来源于stack exchange，提问作者Samarth Mittal