将数据传递到React（Native）挂钩，例如基于类的组件

Question

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

课程示例

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

还有孩子：

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

带有钩子的示例：

使用钩子时，我可以通过以下方式传递数据：

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

该钩子看起来像：

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

是否有一种方法可以将子类仅重构为钩子，而对这些元素的调用保持不变（<Child data={"Hello"}/>）？

Answer 1

我想如果您将<Child data={"Hello"}/>留在父组件中并使用钩子重构Child组件，则可以像以下方式访问数据：

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

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

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

希望对您有帮助！

Answer 2

您只是想走一小步：

export const Child = (data) => {... 

应为：

export const Child = (props) => {... 
  const {data} = props

或：

export const Child = ({data}) => {..