有没有办法在React中创建自己的帮助函数？

Question

在几个组件中，我有一个函数返回用户头像的URL：

import defaultAvatar from 'assets/images/default-pic.jpg'

class MyComponent extends Component {
  userAvatar () {
    const { profile } = this.props

    if (profile.has_avatar) {
      return profile.avatar
    } else {
      return defaultAvatar
    }
  }
}

有没有办法在多个组件之间干掉这个功能？

Answer 1

使用默认道具

如果你创建一个接受头像作为顶级属性的头像组件，那么你可以使用默认道具来指定未提供的值。

function Avatar({ avatar }) {
  return <img src={avatar} />;
}

Avatar.defaultProps = { avatar: defaultAvatar };

然后从现有组件中渲染这个新组件。

return (
  <Avatar profile={props.profile} />
);

通过这种方式，您可以保持声明的所有内容并消除对has_avatar属性的需求。

作为效用函数

但是你也可以直接将它撕掉并调整参数，以便你可以从任何地方调用它。

function getUserAvatar(profile) {
  if (profile.has_avatar) {
    return profile.avatar
  } else {
    return defaultAvatar
  }
}

然后重写原始代码。

class MyComponent extends Component {
  userAvatar () {
    const { profile } = this.props

    return getUserAvatar(profile);
  }
}

作为高阶组件

也可以将其作为更高阶的组件来实现。

function WithAvatar(Component) {
  return function(props) {
    const { profile } = props;
    const avatar = getUserAvatar(profile);

    return <Component avatar={avatar} {...props} />;
  };
}

这将允许您使用WithAvatar组件包装任何现有组件。

function Profile(props) {
  const { profile, avatar } = props;
  return (
    <div>
      <img src={avatar.src} />
      <span>{profile.name}</span>
    </div>
  );
}

const ProfileWithAvatar = WithAvatar(Profile);

render(
  <ProfileWithAvatar profile={exampleProfile} />,
  document.getElementById('app')
);

将profile作为道具传递到外部组件会导致WithAvatar处理它并选择正确的头像，然后将其作为道具传递给包裹的组件。

Answer 2

如果您使用React.createClass方法，则可以使用mixins在组件之间共享代码。由于您使用的是ES6方法，因此您可以签出HOC（高阶组件）

参考：https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775