如何将实例变量从React组件传递到其HOC？

Question

我通常使用组件组合来重用逻辑React方式.例如,这是一个关于如何将交互逻辑添加到组件的简化版本.在这种情况下,我会CanvasElement选择:

CanvasElement.js

import React, { Component } from 'react'
import Selectable from './Selectable'
import './CanvasElement.css'

export default class CanvasElement extends Component {
  constructor(props) {
    super(props)

    this.state = {
      selected: false
    }

    this.interactionElRef = React.createRef()
  }

  onSelected = (selected) => {
    this.setState({ selected})
  }

  render() {
    return (
      <Selectable
        iElRef={this.interactionElRef}
        onSelected={this.onSelected}>

        <div ref={this.interactionElRef} className={'canvas-element ' + (this.state.selected ? 'selected' : '')}>
          Select me
        </div>

      </Selectable>
    )
  }
}

Selectable.js

import { Component } from 'react'
import PropTypes from 'prop-types'

export default class Selectable extends Component {
  static propTypes = {
    iElRef: PropTypes.shape({
      current: PropTypes.instanceOf(Element)
    }).isRequired,
    onSelected: PropTypes.func.isRequired
  }

  constructor(props) {
    super(props)

    this.state = {
      selected: false
    }
  }

  onClick = (e) => {
    const selected = !this.state.selected
    this.setState({ selected })
    this.props.onSelected(selected)
  }

  componentDidMount() {
    this.props.iElRef.current.addEventListener('click', this.onClick)
  }

  componentWillUnmount() {
    this.props.iElRef.current.removeEventListener('click', this.onClick)
  }

  render() {
    return this.props.children
  }
}

效果很好.Selectable包装器不需要创建新的div,因为它的父级为它提供了对另一个可选择元素的引用.

但是,我曾多次被推荐停止使用这种Wrapper组合,而是通过高阶组件实现可重用性.我想尝试使用HoCs,我尝试了一下,但没有比这更进一步:

CanvasElement.js

import React, { Component } from 'react'
import Selectable from '../enhancers/Selectable'
import flow from 'lodash.flow'
import './CanvasElement.css'

class CanvasElement extends Component {
  constructor(props) {
    super(props)

    this.interactionElRef = React.createRef()
  }

  render() {
    return (
      <div ref={this.interactionElRef}>
        Select me
      </div>
    )
  }
}

export default flow(
  Selectable()
)(CanvasElement)

Selectable.js

import React, { Component } from 'react'

export default function makeSelectable() {
  return function decorateComponent(WrappedComponent) {
    return class Selectable extends Component {

      componentDidMount() {
        // attach to interaction element reference here
      }

      render() {
        return (
          <WrappedComponent {...this.props} />
        )
      }
    }
  }
}

问题是似乎没有明显的方法将增强组件的引用(实例变量)连接到更高阶的组件(增强器).

我如何将实例变量(the interactionElRef)从CanvasElement "传入" 到其HOC？

Answer 1

我想出了一个不同的策略.它的行为大致类似于Redux connect函数,提供包装组件不负责创建的道具,但是孩子负责在他们认为合适时使用它们:

CanvasElement.js

import React, { Component } from "react";
import makeSelectable from "./Selectable";

class CanvasElement extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { onClick, selected } = this.props;
    return <div onClick={onClick}>{`Selected: ${selected}`}</div>;
  }
}

CanvasElement.propTypes = {
  onClick: PropTypes.func,
  selected: PropTypes.bool,
};

CanvasElement.defaultProps = {
  onClick: () => {},
  selected: false,
};

export default makeSelectable()(CanvasElement);

Selectable.js

import React, { Component } from "react";

export default makeSelectable = () => WrappedComponent => {
  const selectableFactory = React.createFactory(WrappedComponent);

  return class Selectable extends Component {
    state = {
      isSelected: false
    };

    handleClick = () => {
      this.setState({
        isSelected: !this.state.isSelected
      });
    };

    render() {
      return selectableFactory({
        ...this.props,
        onClick: this.handleClick,
        selected: this.state.isSelected
      });
    }
  }
};

https://codesandbox.io/s/7zwwxw5y41

我知道这不回答你的问题.我想你是想让孩子在不知道父母的情况下离开.

该ref航线觉得不妥,但.我喜欢将工具连接到孩子的想法.您可以响应其中任何一个中的点击.

让我知道你的想法.

Answer 2

正如您在 CanvasElement 的 DOM 元素上所做的那样，Ref也可以附加到类组件，请查看文档“将引用添加到类组件”

\n

export default function makeSelectable() {\n  return function decorateComponent(WrappedComponent) {\n    return class Selectable extends Component {\n      canvasElement = React.createRef()\n\n      componentDidMount() {\n        // attach to interaction element reference here\n        console.log(this.canvasElement.current.interactionElRef)\n      }\n\n      render() {\n        return (\n          <WrappedComponent ref={this.canvasElement} {...this.props} />\n        )\n      }\n    }\n  }\n}\n

\n

另外，如果您需要渲染树中更高级别的祖先中的子实例引用，请检查引用转发。所有这些解决方案都基于您使用 React 16.3+ 的假设。

\n

一些注意事项：

\n

\n

在极少数情况下，您可能希望从父组件访问子\xe2\x80\x99s DOM 节点。通常不建议这样做，因为它会破坏组件封装，但它有时对于触发焦点或测量子 DOM 节点的大小或位置很有用。

\n

虽然您可以向子组件添加引用，但这不是理想的解决方案，因为您只会获得组件实例而不是 DOM 节点。此外，这不能与功能组件一起使用。https://reactjs.org/docs/forwarding-refs.html

\n

\n