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

这是一个非常新的反应，我有一个问题，我的两个组件非常相似，但不同到不一样

我找到了一种组合组件和避免重复的方法，在

Mixins

的帮助下，我遇到了HOC，我认为它非常强大，但对于像我这样还不熟悉React及其内部工作原理的人来说却很困惑

所以我有我的主要组件（wrappee），它将被包装。该组件依次呈现一个子组件（在我的例子中，一个wrappee组件的

textarea

，另一个是

input

字段）

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

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

实际上，我已经设法使用

ref

中的回调将DOM元素传回HOC。但我觉得它很脏，因为我必须有两次回调：

输入控制器

：

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

然后在

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>

这真的让人感觉不舒服，所以我想知道是否有更好的方法来处理这个问题

---

非常感谢您的输入

@Jordan是对的，这不是使用HOC模式。这里可以找到此模式的一个很好的示例：。您可以将HOC看作它所包装组件的超类，但它实际上不是一个类。HOC是一个函数，它接受react组件并返回一个具有所需增强功能的新组件

您所做的是使用

ref

回调将您的所有组件链接在一起，并使其他组件了解其直接子组件以外的内容，这是绝对不推荐的。在您的情况下，我不明白为什么您不应该将所有内容从

inputoc

放到

InputController

中。然后，在

InputController

中的

TextareaAutosize

中定义要绑定到输入的函数，并将它们作为道具传递。它看起来像这样：

输入控制器：

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>
    );
  }
}

类InputController扩展React.Component{ handleChange（）{ //请注意，“this”不会设置为InputController元素 //除非你手动绑定 doSomething（）； } render（）{ 返回( 好啊 ✔ {textareaHint} ); } } 文本区域自动调整大小

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

class TextAreaAutosize扩展了React.Component{
render（）{
返回(
一些文本值
)
}
}

也许我遗漏了一些东西，但在我看来，这与HOC模式不同。术语HOC表示一个函数，在对组件调用时，该函数返回一个（高阶）组件，该组件的工作方式与原始组件类似，但具有附加或更改的行为。你的

InputHOC

看起来就像是一个普通的组件，可以呈现其他组件。是的，我想我知道我做错了什么，我应该将行为引导到道具上，而不是将DOM元素发送回来。。。是的，这更有意义。谢谢

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>
    );
  }
}

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