在react原生组件之间传递数据不工作

Question

我一直在按照这个文档中的说明，并尝试了这个网站上其他问题的一些答案，但是他们都没有打印页面上的道具。不确定我是否调用错误，或者没有正确传递数据。我给我的父母发了邮件，还有3次让孩子去工作的尝试。页面上没有显示任何内容。我已将子组件导入父页面，并将{component}导入子页面。

父:

const ToyDetails = () => {
const [data, setData] = useState('');
const parentToChild = () => {
setData(name)
}
return (
<View>
<CardCard parentToChild={data}
<TouchableOpacity onPress={()=>parentToChild()}
<Text>{buttonText}</Text>
</View>
)
}

child (CartCard.js) attempt 1:打印父页面上的数据

export default class CartCard extends Component {
render() {
const { data } = this.props;
return (
<View>
<Text>{data}</Text>
</View>
)
}
}

子尝试2:两页都不打印

export default class CartCard extends Component {
render() {
const { data } = this.props;
return (
<View>
<Text>{this.props.parentToChild}</Text>
</View>
)
}
}

子尝试3:打印父页数据

const CartCard = ({parentToChild}) => {

return (
<View>
<View>
<Text>{parentToChild}</Text>
</View>
</View>
)
}
export default CartCard

Answer 1

下面是一个关于如何根据代码将数据作为道具传递给子组件的示例https://snack.expo.dev/peRi9sELk很难说出了什么问题，但为了看到组件中反映的变化，你必须重新渲染组件树。最简单的方法就是改变状态。