Question

我有一个名为Sorter的父React组件。在Sorter内部，我有范围滑块的子组件：

<div className="child">
    <rangeSlider props=... />
</div>

<rangeSlider props={...}/>返回简单的输入：

render() {
    return <input type="text" id={this.props.id} name={this.props.id} value=''/>
}

然后我通过componentDidMount()调用模块初始化：

componentDidMount() {
    jQuery('#' + this.props.id).ionRangeSlider(config)
}

在我实际使用范围滑块之前，一切正常。我在config中有回调，它会更新父级（在本例中为Sorter的）状态。之后，范围滑块将消失。我试图通过componentDidUpdate()重新初始化它，但没有成功。

我做错什么了吗？

Answer 1

我已经在codeandbox中尝试过此操作：

https://codesandbox.io/s/summer-sea-imwpp?fontsize=14

如您所见，它工作正常。

能否请您提供错误消息或更多详细信息？

例如：

更改范围后，RangeSlider是否必须更新？
Sorter如何通过ionRangeSlider配置更改其状态？

谢谢。

Answer 2

我知道了。由于我每次都用新的道具调用<RangeSlider props={...} />渲染，它会触发React更新DOM并运行重新渲染。

从一开始，我们只渲染了一个<input>元素，该元素仅具有永远不变的静态属性：

<input type="text" id={this.props.id} name={this.props.id} value='' readOnly />

ionRangeSlider在被调用时会将其自己的DOM元素添加到此输入中，并且在发生这种情况后，我们就无需与该输入进行交互。

因此，我们不必在每次新道具到达时都重新渲染它。因此，我只是将输入包装在空<div />中，并阻止了渲染的执行：

shouldComponentUpdate() {
    return false
}

render() {
    return (
        <div>
            <input type="text" id={this.props.id} name={this.props.id} value='' readOnly />
        </div>
    )
}

但是我仍然不认为写这样的伪方法（只返回单个静态值）是一种好习惯，但是只要在任何情况下我呈现的DOM都不会改变，情况就可以得到控制。

如何在React组件上正确初始化jQuery模块？

2 个答案: