Question

我将我的项目从反应14迁移到反应16.我有很多自定义混合。我知道在反应16中不推荐使用mixins。问题是如何迁移自定义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>
      );
    }
  }
}

和我对Component的新classe 16与ES6做出反应：

class Header extends React.PureComponent{

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

  render() { }
}

怎么做？

Answer 1

您可以选择几个选项。

正如我从您的代码中看到的那样，您不需要在这里使用mixin，import cProfile def funct(a): print a cProfile.runcall(funct,"Hello")不使用基类中的avatar，您可以将其定义为Component < / p>

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; }使用this.avatar(src, size, name)

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

<MyAvatar src={src} size={size} name={name} />

稍后再使用：

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

将Mixins迁移到React 16 ES6

1 个答案: