[React] Compound Component (React.Children.map & React.cloneElement)

最新推荐文章于 2026-02-06 00:30:23 发布

转载最新推荐文章于 2026-02-06 00:30:23 发布 · 274 阅读

标签

#javascript #ViewUI

本文介绍如何创建一个Tabs组件，该组件能够维护当前激活选项卡的状态，并将此状态传递给子组件如TabList和TabPanels。通过使用React.Children.map和React.cloneElement方法，我们可以确保组件状态的完整性和独立性。

Imaging you are building a Tabs component.

If looks like:

<Tabs>
    <TabList>
        <Tab> one </Tab>
        <Tab isDisabled> two </Tab>
        <Tab> three </Tab>    
    </TabList>

    <TabPanels>
        <TabPanel>
            content one
        </TabPanel>
        <TabPanel>
            content two
        <TabPanel>
        </TabPanel>
        <TabPanel>
            content three
        </TabPanel>
    </TabPanels>        
</Tabs>

You want to know which tab is clicked (actived). But you don't want this actived tab state be exported to our app, you want it been kept to Tabs component.

For example in Tabs component, there is a state called 'activedIndex':

class Tab extends React.Component {
  state = {
    activedIndex: 0
  }

  render() {
    return (
　　　　{this.props.children}
　　);
  }
}

You want to pass down to TabList and TabPanels componet. And also TabList and TabPanels may receive different props depends on usecases.

You can use 'React.Children.map' to map over each direct child of the componet (in our case is TabPanels and TabList).

 React.Children.map(this.props.children, (child, index) => {

To pass down the new props, we can use 'React.cloneElement', which need the old props if any, but merge with new props we pass in.

return React.cloneElement(child, {
            activeIndex: this.state.activeIndex
          })

Code:

class Tab extends React.Component {
  state = {
    activedIndex: 0
  }

  render() {
    return (
      React.Children.map(this.props.children, (child, index) => {
        if (child.type === TabPanels) {
          return React.cloneElement(child, {
            activeIndex: this.state.activeIndex
          })
        } else if(child.type === TabList) {
          return React.cloneElement(child, {
            activeIndex: this.state.activeIndex,
            isActivate: index === this.state.activeIndex
          })
        } else {
          return child
        }
      })
    )
  }
}