Question

我正在研究将键盘从react-native取消的方法，而实现该方法的一种方法是使用HOC

import React from 'react';
import { TouchableWithoutFeedback, Keyboard, View } from 'react-native';

const DismissKeyboardHOC = (Comp) => {
  return ({ children, ...props }) => (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
      <Comp {...props}>
        {children}
      </Comp>
    </TouchableWithoutFeedback>
  );
};
const DismissKeyboardView = DismissKeyboardHOC(View)

然后

像这样简单地使用它

render() {
    <DismissKeyboardView>
        <TextInput keyboardType='numeric'/>
    </DismissKeyboardView>
}

有人可以向我解释上面的代码片段，或者具体来说，这部分代码

 <Comp {...props}>
        {children}
      </Comp>

就像这里发生了什么？

Answer 1

<Comp {...props}>{children}</Comp>只是简单地使组件透明地传递使用Spread Syntax获得的所有props包装组件。

以下示例

<DismissKeyboardView style={someStyleObj}><Text>Hi</Text></DismissKeyboardView>

将等同于

<TouchableWithoutFeedback ...>
  <View style={someStyleObj}> /*NB! wrapped view got styles*/
    <Text>Hi</Text>
  </View>
</TouchableWithoutFeedback>

不需要children属性的BTW特殊处理

const DismissKeyboardHOC = (Comp) => {
  return props => (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
      <Comp {...props}/>
    </TouchableWithoutFeedback>
  );
};

键盘关闭HOC

1 个答案: