时间戳

首页 > 解决方案 > 如何在 React 组件上正确初始化 jQuery 模块？

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

问题描述

我有一个名为 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)
}

在我真正使用范围​​滑块之前，一切正常。我有回调 in config，它更新父级（在本例中是排序器的）状态。在那个范围滑块消失之后。我试图通过重新初始化它，componentDidUpdate()但它没有成功。

难道我做错了什么？

标签： reactjs

解决方案

我在代码沙箱中试过这个：

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

如您所见，它运行良好。

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

如 ：

  1. RangeSlider范围更改时是否必须更新？

  2. 如何通过配置Sorter更改其状态ionRangeSlider？

谢谢。

推荐阅读