Question

我刚刚开始使用React。我写了这个简单的组件：

class DocVerDate extends React.Component {

    static propTypes = {
        dateTypes: React.PropTypes.array.isRequired
    };

    constructor(props) {
        super(...arguments);
        this.state = {
            typeSelected: false
        };
    }

    typeChanged = ev => {
        this.setState({typeSelected: ev.target.value.length > 0});
    };

    render() {
        return <div className="cr-input-row">
            <select style={{width:'75px'}} className="_sent_select" onChange={this.typeChanged}>
                <option value="">(Sent)</option>
                {this.props.dateTypes.map(dt =>
                    <option key={dt[0]} value={dt[0]}>{dt[1]}</option>
                )}
            </select>
            { this.state.typeSelected ? [' on ', <input ref="datepicker" type="hidden"/>] : null }
        </div>
    }
}

基本上，根据您从下拉列表中选择的内容，将显示日期字段。

我相信我可以通过$(this.refs.datepicker).datepicker()初始化该日期窗口小部件，但问题是该元素可能在DOM中，也可能不在DOM中，具体取决于状态。

处理这个问题的最佳方法是什么？

Answer 1

我将日期选择器包装在React组件中，因此您将拥有

{ this.state.typeSelected ? [' on ', <MyDatePicker />] : null }

然后在MyDatePicker中你会有

componentDidMount() {
   this.initializeDatePicker()
}

Answer 2

当某些东西依赖于州时，你应该在componentDidUpdate上进行。然后检查DatePicker的可见性，如果它当前可见并且尚未初始化，则对其进行初始化。

componentDidUpdate() {
    var $datePicker = $(this.refs.datepicker);
    if ($datePicker.length > 0 && DATE_PICKER_IS_NOT_INITIALIZED_YET) $datePicker.datepicker();
}

如何根据状态有条件地初始化组件？

2 个答案: