在 React 中，有時組件內部有一個函式，用于當一個專案是active或pressed類似于下面的 Pressable 時。如何重新創建這種模式，其中pressed變數在函式引數中的物件內可用？
<Pressable onPress={ () => null }>
{ ( {pressed} ) => (
<Text>{pressed ? "Pressed!" : "Press Me"}</Text>
)
</Pressable>
我的嘗試不起作用
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
const Component = ({ children }) => {
// Not sure how active should be passed down to children
// via a useContext maybe? Is that the only way?
const [active, setActive] = React.useState(true);
return <View>{children}</View>;
};
export default function App() {
return (
<View>
<Component>
{({active}) => (
<Text>
{active ? "Active" : "Not active"}
</Text>
)}
</Component>
</View>
);
}
uj5u.com熱心網友回復：
將命名函式運算式作為子組件傳遞給組件
import { StyleSheet, View, Text } from 'react-native'
const Component = ({ children }) => {
const [active, setActive] = React.useState(true);
return <View>{children(active)}</View> ;
};
export default function App() {
const demo = (active) => (
<Text>
{active ? "Active" : "Not active"}
</Text>
);
return (
<View>
<Component>
{demo}
</Component>
</View>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/371718.html
上一篇：如何在ReactNativeyoutubeiframe中切換到全屏（點擊YouTube播放器gui上的全屏按鈕時旋轉到橫向）？
下一篇：如何在嵌套映射函式中應用條件？