[React] Write Compound Components

最新推荐文章于 2025-08-17 20:43:43 发布

weixin_30375427

最新推荐文章于 2025-08-17 20:43:43 发布

阅读量64

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Answer1215/p/8030709.html

本文介绍如何使用React的复合组件模式来提高UI呈现的灵活性。通过使用React.Children.map和React.cloneElement，用户可以自由控制组件中On/Off/Button的显示顺序及外观。此模式将功能性与表现形式分离，使组件更具复用性和定制性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Compound component gives more rendering control to the user. The functionality of the component stays intact while how it looks and the order of the children can be changed at will. We get this functionality by using the special React.Children.map function to map over the children given to our <Toggle/> component. We map over the children to pass the on state as a prop to its children. We move the visual pieces of the component out into function components and add them as static properties to <Toggle/>.

User has free control how On / Off / Button shows on the page:

    <Toggle onToggle={(on) => console.log("Toggle", on)}>
        <Toggle.On>
            Switch is On!
        </Toggle.On>
        <Toggle.Button />
        <Toggle.Off>
            Switch is Off!
        </Toggle.Off>
    </Toggle>;

Toggle.On, Toggle.Off and Toggle.Button is private components for Toggle:

class Toggle extends React.Component {

  // An empty function
  static defaultProps = {onToggle: () => {}};
  static On = ToggleOn;
  static Off = ToggleOff;
  static Button = ToggleButton;

  ....

}

All those components have props, which user doesn't need to care about, those props should be passed down fromt the parent component: Toggle:

const ToggleOn = ({on, children}) => {
  if(on) {
    return (<div>{children}</div>)
  } else {
    return null;
  }
};
const ToggleOff = ({on, children}) => {
    if(on) {
        return null;
    } else {
        return (<div>{children}</div>);
    }
};
const ToggleButton = ({on, toggle, ...props}) => (
    <Switch on={on} onClick={toggle} {...props} />
);

This can be done by using React.Children.map and React.cloneElement:

  render() {
    const {on} = this.state;
    const children = React.Children.map(
        this.props.children,
        (child) => React.cloneElement(child, {
            on: this.state.on,
            toggle: this.toggle
        })
    );
    return (
        <div> {children} </div>
    )
  }