在DOM中包装功能的高阶组件

Higher Order Component in DOM to Wrap functionality

本文关键字：高阶 组件 功能 包装 DOM      更新时间：2023-09-26

我需要将功能包装在一个按钮中。但是，当我在另一个组件的呈现方法中调用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打开一个对话框，并在我点击按钮时提交一个评论表单。我需要AddComment在整个应用程序中可用的其他组件。

HOC模式是否正确?我怎样才能轻松地做到这一点?

谢谢

快速总结一下:什么是高阶分量?

只是一个简单概念的一个花哨的名字:简单地说:一个组件，它接受一个组件，并返回一个更增强的版本组件。

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

    • 接受一个函数，该函数将owner props映射到一个新的props集合

    • 我们基本上是从那个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。我强烈建议您在没有库的情况下尝试一下，以更好地理解高阶组件。

在玩完高阶组件后，你应该能够回答下面的这些问题:

    什么是高阶分量?
  1. 使用HOC有哪些缺点?有哪些用例?
  2. 这将如何提高性能?我如何使用它来优化性能?
  3. 什么时候使用HOC合适?
相关文章：