javascript - 像基于类的组件一样将数据传递给 React (Native) 钩子(Hook)

Question

我刚刚开始过渡到 React Native 中的 Hooks，并且很难将数据传递给子元素。使用基于类的组件，我们可以进行非常简单的 XML 样式的 props 传递。

类示例

class Parent extends React.Component {
    render() {
        return (
            <Child data={"Hello"}/>
        )
    }
}

还有 child :

class Child extends React.Component {
    render() {
        return (
            <Text>{this.props.data}</Text>
        )
    }
}

带钩子(Hook)的示例:

使用钩子(Hook)时，我能够通过以下方式传递数据:

<Child {...["Hello"]} />

钩子(Hook)看起来像:

export const Child = (data) => {
    return (
        <Text>{data[0]}</Text>
    )
}

有没有一种方法可以将子类重构为钩子(Hook)，并保持对这些元素的调用不变( <Child data={"Hello"}/> )？

Answer 1

我想如果你离开<Child data={"Hello"}/>在您的父组件中并重构 Child带有钩子(Hook)的组件，您可以像下面这样访问数据:

export const Child = ({data}) => {
   return (
      <Text>{data}</Text>
   )
}

技术上props已作为 const Child = (props) => {} 传递到您的组件。一旦你解构props ，您可以拥有data属性如上。

这称为对象解构，请进一步阅读 here .

希望对您有所帮助!