请写一个expo 在父子组件之间传递对象的值和方法的demo 用useState
时间: 2024-03-15 11:45:10 浏览: 105
react 父组件与子组件之间的值传递的方法
好的,下面是一个简单的demo代码,展示了如何使用useState在父子组件之间传递对象的值和方法:
```js
import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
function ParentComponent() {
const [person, setPerson] = useState({ name: 'John', age: 30 });
const updatePerson = () => {
setPerson({ name: 'Mike', age: 25 });
};
return (
<View>
<Text>{person.name}</Text>
<Text>{person.age}</Text>
<ChildComponent person={person} updatePerson={updatePerson} />
</View>
);
}
function ChildComponent(props) {
const { person, updatePerson } = props;
return (
<View>
<Button title="Update Person" onPress={updatePerson} />
<Text>{person.name}</Text>
<Text>{person.age}</Text>
</View>
);
}
export default function App() {
return (
<View>
<ParentComponent />
</View>
);
}
```
在这个例子中,我们在ParentComponent中定义了一个person对象和一个updatePerson方法,然后将它们作为props传递给ChildComponent。在ChildComponent中,我们可以通过props获取到这些值,并且可以在点击按钮时调用updatePerson方法来更新person对象。这样,我们就可以在父子组件之间传递对象的值和方法了。
阅读全文