对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,所以我想知道是否有更好的方法来解决这个问题?
非常感谢您的投入
答案 0 :(得分:1)
您正在使用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>
)
}
}