Question

我正在尝试将 React Component 重写为带有钩子的功能组件。我试图重写的组件是在这里找到的：

https://github.com/SHISME/react-native-draggable-grid#usage

在遵循使用示例时，组件按预期工作，但在转换组件后，我在 <DraggableGrid 行上收到错误消息，说：

Invariant Violation: [335,"RCTView",{"height":"<<NaN>>"}] is not usable as a native method argument

到目前为止我所做的：

const DraggableTest = (props) => {
  const [items, setItems] = useState({
    data: [
      {name: '1', key: 'one'},
      {name: '2', key: 'two'},
      {name: '3', key: 'three'},
      {name: '4', key: 'four'},
      {name: '5', key: 'five'},
      {name: '6', key: 'six'},
      {name: '7', key: 'seven'},
      {name: '8', key: 'eight'},
      {name: '9', key: 'night'},
      {name: '0', key: 'zero'},
    ],
  });

  const render_item = (item: {name: string, key: string}) => {
    return (
      <View style={styles.item} key={item.key}>
        <Text style={styles.item_text}>{item.name}</Text>
      </View>
    );
  };

  return (
    <View 
      style={{height: 100}}
      style={{height: props.height}} // When trying parent nbr 2
      >
      <DraggableGrid
        style={{height: 200}}
        style={{height: props.height}} // When trying parent nbr 2
        height={200}
        numColumns={4}
        renderItem={render_item}
        data={items}
        onDragRelease={(data) => {
          setItems({data});
        }}
      />
    </View>
  );
};
export default DraggableTest;

我尝试过的父母：

<DraggableTest style={{height: 200}} />
<DraggableTest height={200} />

我也不完全确定如何处理接口（如果需要？）。

关于 height 错误，我遗漏了什么？ DraggableGrid 是否以某种方式试图从包装组件获取 height 值？是否存在尚未（尚未？）启动的 height 值？

祝您有美好的一天！ :)

Answer 1

您不能在组件中添加这样的样式。您需要将其作为道具传递，如下所示：

<DraggableTest height={200} />

并像这样添加：

const DraggableTest = (props) => {

...

  return (
     <div style={{ height: props.height}} >
       //more code here
     </div>
  )
}

将 React 组件转换为带有钩子的功能组件

1 个答案: