react props的问题

Question

子组件的searchKey 是通过props传递过来的。当父组件传递的props.searchKey改变的时候怎么重新render子组件呢

Answer 1

推荐不要在这个组件中处理 search 方法,获取数据, 应该在父组件(存储 searchKey 所在的组件).
父组件处理完成后, 通过 setState 更新状态, 进而更新 JobList 组件.

如果一定要在这个组件里处理获取数据也是可以, 如下

componentWillReceiveProps (nextProps) {
const nextSearchKey = nextProps.searchKey;
const curSearchKey = this.props.searchKey;
    if (nextSearchKey !== curSearchKey) {
        // 在这里处理 ajax 请求
        const results = ajaxMock(); //  模拟
        // 获取到结果后更新 state
        this.setState({
            lists: results
        })
    }
}

我建议,看下容器组件跟展示组件分离,相关文章https://www.qcloud.com/commun...

Answer 2

组件的props改变时会自动触发组件render，直接在render中使用props属性
或者在componentWillReceiveProps 时将调用setState使用都会触发render

Answer 3

父组件 searchKey改变，如果引起父组件render的话，子组件也会render,同时获取到最新的 searchKey 值。