将数据传递给 React(原生)钩子，就像基于类的组件一样

Question

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

类示例

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属性，如上。

它被称为对象解构，请在此处进一步阅读。

我希望这有所帮助！

Answer 2

你只是错过了一小步：

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

应该是：

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

或：

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