react中render props 应用

*render props
render props 是 react 中实现逻辑复用的一种模式,本质是使用回调函数,父组件写具体业务逻辑,公用组件调用父组件这个业务逻辑函数,达到组件通用性。

父组件
react中render props 应用_第1张图片
上述 operateLists为父组件向子组件传递配置。 逻辑为gatherType值为2时,为禁止状态, 其他值为激活状态。gatherType为业务字段,放在公共组件显然不太合理,所以采用render props方式。

子组件执行回调函数:
react中render props 应用_第2张图片
例二: 单选框逻辑;
react中render props 应用_第3张图片
子组件:
// 将改变后的状态通知给父组件
handleChange && handleChange(selectManage);

你可能感兴趣的:(reactjs)