将 Mixins 迁移到 React 16 ES6

Question

我正在将我的项目从 React 14 迁移到 React 16。我有很多自定义混合。我知道 mixins 在 React 16 中已被弃用。问题是如何迁移自定义 mixins？

我的自定义混合：

import Avatar from 'material-ui/Avatar';
import { apiConstants } from '../constants/AppConstants';

export default {
  avatar: (src, name, size) => {
    if (src) {
      src = src.indexOf('http') >= 0 ? src : `${apiConstants.API_HOST}/imgprovider?i=${src}`;
      return (
        <Avatar
          size={size}
          src={src} />
      );
    }

    if (name) {
      return (
        <Avatar
          size={size}
          backgroundColor="#306398">
          {name[0].toUpperCase()}
        </Avatar>
      );
    }
  }
}

我的新组件类在 React 16 with ES6 中：

class Header extends React.PureComponent{

  mixins: [AvatarProfile] ?????  (HERE IS THE DOUBT)

  render() { }
}

如何操作？

Answer 1

有多个选项供您选择。

正如我从你的代码中看到的那样，你在这里并不需要 mixin，你的 avatar 不使用基础 class 中的 this，你可以定义它作为组件

export default function MyAvatar({ src, name, size }) {
    if (src) {
        src = src.indexOf('http') >= 0 ? src : `${apiConstants.API_HOST}/imgprovider?i=${src}`;
        return (<Avatar size={size} src={src}/>);
    }

    if (name) {
        return (<Avatar size={size} backgroundColor="#306398">{name[0].toUpperCase()}</Avatar>)
    }

    return null;
}

之后，使用 <MyAvatar src={src} size={size} name={name} />

而不是 this.avatar(src, size, name)

如果你真的需要像 mixin 这样的东西，你可以这样定义它：

export default function withAvatarProfile(superclass) {
    return class extends superclass {
        avatar(src, name, size) {
            return "avatar";
        }
    }
}

以后再用：

class Header extends withAvatarProfile(React.PureComponent) {
  render() { }
}

将 Mixins 迁移到 React 16 ES6

Migrate Mixins to React 16 ES6

migrate

mixins

ecmascript-6

reactjs