Question

我需要将功能包装在一个，让我们说按钮。但是当我在另一个组件的render方法中调用HOC时，我什么也得不到。

我有这个HOC

import React,{Component,PropTypes} from 'react';

export let AddComment = (ComposedComponent) => class AC extends React.Component  {


        render() {
            return (
                <div class="something">
                    Something...
                    <ComposedComponent {...this.props}/>
                </div>
            );
        }


}

并尝试这样做

import {AddComment} from '../comments/add.jsx';
var Review = React.createClass({

render: function(){
    return (
            <div className="container">
{AddComment(<button>Add Comment</button>,this.props)}
</div>
});
module.exports = Review;

我希望AddComment打开一个Dialog并在我点击按钮时提交一个评论表单。我需要AddComment才能在整个应用程序中使用其他组件。

HOC模式是否正确？我怎样才能轻松实现这一目标？

由于

Answer 1

总结一下：什么是高阶组件？

一个简单概念的简单名称：简单地说：一个组件，它接收一个组件并返回一个更加增强的版本组件。

我们实质上是在增强一个组件。

接受将所有者道具映射到新的道具集合的功能传递给基础组件。
我们基本上是从BaseComponent向下传递道具到包装组件，以便我们可以在那个中使用它们下面的子组件：

用于将多个高阶组件组合成一个组件高阶分量。

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { AddComment } from '../comments/add.jsx';

const mapProps = propFunction => Component => (props) => {
 return React.createFactory(Component)(propFunction(props));
};

const compose = (propFunction, ComponentContainer) => (BaseComponent) => {
    return propFunction(ComponentContainer(BaseComponent));
};

const Review = AddComment(({ handleReviewToggle }) => (
    <div className="container">
      <ReviewButton
        primaryText="Add Comment"
        _onClick={handleReviewToggle}
      />
    </div>
  ));

export default Review;

// ============================================= ===================== //

  const EnhanceReview = compose(withProps, AddComment)(Review);

  const withProps = mapProps(({ ...props }) => ({ ...props }));

AddComment Container，它将包含按钮和对话框本身。

  export function AddComment(ComposedComponent) {
    class AC extends React.Component {
    constructor() {
      super();

      this.state = {open: false};
    }

    handleReviewToggle = () => {
      this.setState({ open: !this.state.open })
    }

    render() {
      return (
        <ComposedComponent
          {...this.props}
          {...this.state}
          {...{
            handleReviewToggle: this.handleReviewToggle,
          }}
        />
      );
    }
  }

  export default AddComment;

// ============================================= =====================

ReviewButton按钮，用于触发事件以更改状态为true或false。

  const ReviewButton = ({ _onClick, primaryText }) => {
    return (
      <Button
        onClick={_onClick}
      >
        {primaryText || 'Default Text'}
      </Button>
    );
  };

  export default ReviewButton;

// ============================================= ===================== //

然而，这一切都是在不使用库的情况下完成的。这里有一个名为recompose的人：https://github.com/acdlite/recompose。我强烈建议您在没有库的情况下进行试用，以便更好地理解高阶组件。

在使用高阶组件后，您应该能够回答以下问题：

什么是高阶组件？
使用HOC有什么缺点？有哪些用例？
这将如何提高性能？我如何使用它来优化性能？
何时适合使用HOC？

DOM中的高阶组件包装功能

1 个答案: