时间戳

首页 > 解决方案 > 是否可以为 React 组件实现类似继承的机制以减少几乎重复的代码？

javascript - 是否可以为 React 组件实现类似继承的机制以减少几乎重复的代码？

问题描述

我发现我不得不重新实现很多相同的功能。例如，对于接下来的 3 个组件，我正在为style、className和实现相同的代码id。我知道我可以将{...props}其作为参数而不是听到，然后传递{...props}给返回函数内的容器，但是如果我希望这些组件每个都有自己的类名和样式，并且总是分配给每个组件，我就无法做到这一点这些类的实例。我稍微研究了高阶组件，但无法理解在这种情况下如何使用它们

const styles = {
    container:{
        position: 'absolute'
    },
}

const Modal = ({className, style, id, hidden, children}) => {

    return (
        <div 
            className={`modal ${className}`}
            style={...{styles.container}, ...{style}}
            id={id}
        >
            {!hidden && <ExtraContent />}
            {children}
        </div>
    )
}

const styles = {
    container:{
        margin: 10
    }
}

const VoteButton = ({className, style, id, pressed}) => {
    let img
    if (pressed){
        img = './img_pressed.jpg'
    }else{
        img = './img_not_pressed.jpg'
    }
    return (
        <div
            className={`voteButton ${className}`}
            style={...{styles.container}, ...{style}}
            id={id}
        >
            <img src={img}>
        </div>
    )
}

const styles = {
    container:{
        display: 'flex'
    }
}

const Navbar = ({className, style, id, links, children, ...props}) => {
    return (
        <nav 
            {...props}
            className={`navbar ${className}`}
            style={...{styles.container}, ...{style}}
            id={id}
        >
            {links.map(lk => <a href={lk.href}>{lk.text}</a>
            {children}
        </nav>
    )
}

需要明确的是，我正在寻找一种方法来避免必须为每个组件定义和修改className, 。如果我能做到一次就好了。我知道这对于第三个组件来说可能特别困难，因为它是一个而不是一个 div。styleidnav

标签： javascriptreactjshigher-order-components

解决方案

一种方法是拥有一个返回组件函数的函数：

function createComponentClass(Ele, name, styles, children) {
  return (props) => {
    const { className, style, id } = props;
    return (
      <Ele className={`${name} ${className}`} style={...{styles.container}, ...{style}} id={id}>
        {children(props)}
      </Ele>
    );
  };
}

const Modal = createComponentClass('div', 'modal', { container: { ... } }, (props) => {
  return (
    <>
      {!props.hidden && <ExtraContent />}
      {props.children}
    </>
  );
});

const VoteButton = createComponentClass('div', 'voteButton', { container: { ... } }, (props) => {
  let img = pressed ? './img_pressed.jpg' : './img_not_pressed.jpg';
  return <img src={img} />;
});

const Navbar = createComponentClass('nav', 'navbar', { container: { ... } }, (props) => {
  return (
    <>
      {links.map(lk => <a href={lk.href}>{lk.text}</a>
      {children}
    </>
  );
});

推荐阅读