高阶组件和访问包装元素的子元素

时间:2016-01-14 16:48:03

标签: javascript reactjs higher-order-functions

对React来说很新,我遇到了这个问题,我的两个组件非常相似,但又不同,不一样。

我查找了一种组合组件并避免重复的方法,并且在Mixins之后,我遇到了HOC,我认为这可能非常强大,但对于像我这样还不熟悉的人来说却很困惑与React及其内部运作。

所以我有我的主要组件(wrappee)然后将被包裹。反过来,该组件呈现一个子组件(在我的情况下为一个wrappee组件的textarea,另一个是input字段)。

我想使用HOC的原因之一是我将事件侦听器绑定到文本输入,因此需要能够从HOC访问它。

    Textarea ---- InputController ---- InputHOC
    Input    ---/

在实践中,我已经设法使用ref中的回调将DOM元素传回HOC。但我觉得它很脏,因为我必须有2个回调:

InputController

 return (
  <div>
    {textareaHint}
    <div className='longtext-input-wrapper'>
      {textareaComponent}
    </div>
  </div>
)

textareaComponent

return <TextareaAutosize
          ref = {
            (c) => {
              this._input = c
            }
          }
          className={classList}
          minRows={MIN_ROWS}
        />

然后在InputHOC

 <div className={submitButtonClass}>
    <Button clickHandler={_buttonClickHandler.bind(this)} ref='submitButton'>
      <span className='button-text'>Ok</span>
      <span className='button-icon'>✔</span>
    </Button>
    <InputComponent ref={
        (item) => {
          if (item && !this.input) {
            this.input = item._input
          }
        }
      } 
    />
 </div>

然后我可以访问this.input中的componentDidMount

const inputNode = ReactDOM.findDOMNode(this.input)

它确实感觉很hacky,所以我想知道是否有更好的方法来解决这个问题?

非常感谢您的投入

1 个答案:

答案 0 :(得分:1)

@Jordan是对的,这不是使用HOC模式。可以在此处找到此模式的一个很好的示例:https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775。您可以将HOC视为其包装的组件的超类,但它实际上并不是一个类。 HOC是一个函数,它接收一个反应组件并返回一个具有所需增强功能的新组件。

您正在使用ref回调将所有组件链接在一起,并让其他组件了解除直接子项之外的其他组件,这绝对不是推荐的。在您的情况下,我不明白为什么您不应该将InputHOC的所有内容放入InputController。然后,在TextareaAutosize中的InputController中定义要绑定到输入的函数,并将它们作为props传递。它看起来像这样:

InputController:

class InputController extends React.Component {
  handleChange() {
    // Note that 'this' will not be set to the InputController element
    // unless you bind it manually
    doSomething();
  }

  render() {
    return (
      <Button clickHandler={_buttonClickHandler.bind(this)} ref='submitButton'>
        <span className='button-text'>Ok</span>
        <span className='button-icon'>✔</span>
      </Button>
      <div>
        {textareaHint}
        <div className='longtext-input-wrapper'>
          <TextareaAutosize callback={this.handleChange} />
        </div>
      </div>
    );
  }
}

TextareaAutosize

class TextAreaAutosize extends React.Component {
  render() {
    return (
      <textarea onChange={this.props.onChange}>
        Some text value
      </textarea>
    )
  }
}