我正在使用 react 和 Firebase，我為幼兒園制作了一個應用程式。現在，我有一些不應該對父母可見的組件。有沒有一種簡單的方法可以做到這一點？這是我的第一個應用程式，尤其是使用 Firebase 和 react。
我在想一些事情，比如檢查角色，然后只是一個簡單的 if else 陳述句。我不確定這是否是一個好的邏輯。
更新
我的用戶鉤子：
export function useAllUsers() {
const [users, setUsers] = useState([]);
useEffect(() => {
const usersCollected = [];
firebase
.firestore()
.collection("users")
.get()
.then((snapshot) => {
snapshot.forEach((doc) => {
usersCollected.push({
...doc.data(),
uid: doc.id,
});
});
setUsers(usersCollected);
console.log(usersCollected);
});
}, []);
return users;
}
日歷 ：
function DateAndTimePickers() {
const classes = useStyles();
const [ort, setOrt] = useState("");
const [notiz, setNotiz] = useState("");
const [hinweis, setHinweis] = useState("");
const [eintragen, setEintragen] = useState([]);
const [dateandtime, setDateandtime] = useState([]);
function handelDateandTime(e) {
setDateandtime(e.target.value);
}
function handelOrt(e) {
setOrt(e.target.value);
}
function handelNotiz(e) {
setNotiz(e.target.value);
}
function handelHinweis(e) {
setHinweis(e.target.value);
}
function KalenderEintrag() {
db.collection("eintrag")
.doc()
.set({
ort,
notiz,
hinweis,
dateandtime,
})
.then(() => {
setEintragen([...eintragen, { ort, notiz, hinweis, dateandtime }]);
console.log("Documents saved succesfully");
})
.catch((err) => {
console.log(err);
});
}
function fetchKalendareintrag() {
firebase
.firestore()
.collection("eintrag")
.get()
.then((snapshot) => {
let loadedIfnos = snapshot.docs.map((doc) => {
console.log(doc.data());
return doc.data();
});
setEintragen(loadedIfnos);
});
}
useEffect(() => {
fetchKalendareintrag();
}, []);
return (
//hide
<ScrollView style={styles.root}>
<Container>
<TextField
id="datetime-local"
label="Neues Ereigniss"
type="datetime-local"
defaultValue="2021-09-16T10:30"
className={classes.root}
InputLabelProps={{
shrink: true,
}}
onChange={(value) => {
handelDateandTime(value);
}}
/>
</Container>
{/* ORT */}
<Container className={classes.ortContainer}>
<TextField
id="standard-helperText"
label="Ort"
defaultValue="Text"
onChange={(value) => {
handelOrt(value);
}}
/>
</Container>
{/* Hinweis */}
<Container className={classes.ortContainer}>
<TextField
id="standard-helperText"
label="Hinweis"
defaultValue="Text"
onChange={(value) => {
handelHinweis(value);
}}
/>
</Container>
{/* Notizen */}
<Container className={classes.ortContainer}>
<TextField
id="standard-helperText"
label="Notizen"
defaultValue="Text"
onChange={(value) => {
handelNotiz(value);
}}
/>
</Container>
<Container>
<Button onClick={() => KalenderEintrag()} className={classes.btn} variant="outlined">Absenden</Button>
</Container>
//Show
{/* Kalender eintr?ge */}
{/* Kalender eintr?ge */}
{eintragen.map((item) => {
return (
<Card className={classes.card}>
<CardContent>
<Typography
className={classes.title}
color="textSecondary"
gutterBottom
>
{item.ort}
</Typography>
<Typography variant="h5" component="h2">
{item.hinweis}
</Typography>
<Typography className={classes.pos} color="textSecondary">
{item.notiz}
</Typography>
<Typography variant="body2" component="p">
{item.dateandtime}
<br />
</Typography>
</CardContent>
<CardActions>
</CardActions>
</Card>
)
})}
</ScrollView>
);
}
const mapStateToProps = (store) => ({
eintrag: store.userState.currentUser,
});
export default connect(mapStateToProps, null)(DateAndTimePickers);
uj5u.com熱心網友回復：
您可以使用簡單的if else陳述句或switch塊來檢查角色，但隨著應用程式開始增長，管理所有基于角色的邏輯將是一項乏味的任務。這一切都與您如何設定架構以處理role基于流的方式有關。
我也遇到過類似的流程。
您可以做的是創建鉤子，例如useHasRoles和useUser。
useHasRoleshook 將檢查您當前登錄的用戶是否具有指定的角色。為了獲取當前用戶的詳細資訊，我們還有另一個鉤子useUser，它將回傳當前用戶的詳細資訊和該特定用戶的角色。
useHasRoles（鉤子）
const useHasRoles =(roleNames)=>{
const roles = useUser();
if (typeof roleNames === "string") {
//check whether current user has specific role or not
//return true/false
} else if (Array.isArray(roleNames)) {
//check if current user has all roles specified in roleNames
//return true/false
} else {
return false;
}
}
使用用戶（鉤子）
const useUser = ()=>{
//get current user details and roles.
return {roles:[]}
}
如何使用？
const sample = ()=>{
const hasAdminRole = useHasRoles('ADMIN') // ['ADMIN', 'SUPERADMIN']
// you can pass roles as array, so it will check for all the roles.
}
如果這有幫助，請告訴我。
uj5u.com熱心網友回復：
有很多方法可以做到這一點。
這是一個簡單的 TextButton，如果用戶是父母，則禁用該按鈕：
interface Props {
onPress: () => void
children: string
userRole: UserRole
}
const TextButton = ({ onPress, children, userRole }: Props) => {
const disabled = userRole === UserRole.Parent
return (
<TouchableOpacity
activeOpacity={1}
style={styles.button}
onPress={onPress}
disabled={disabled}>
<Text
style={styles.text}
{children}
</Text>
</TouchableOpacity>
)
}在這里，我使用帶有條件渲染元素的模式。
<Modal {...{ isVisible, onClose, hasBackdrop, displayName: Alert.displayName }}>
<View style={[styles.container, getType(), { paddingBottom }]}>
{isCloseIcon && (
<TouchableOpacity style={styles.closeContainer} onPress={onClose}>
<SvgView testID={alertCloseIcon} svg={<IconClose style={styles.closeIcon} />} />
</TouchableOpacity>
)}
<View style={styles.content}>
<SvgView style={styles.closeIconContainer} svg={icon} />
<Text testID={alertTitle} style={getTextStyles()}>
{title}
</Text>
{!!subtitle && (
<Text testID={alertSubtitle} style={styles.subtitle}>
{subtitle}
</Text>
)}
</View>
</View>
</Modal>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/311258.html
上一篇：iOS上的Flutter：盡管在未來的構建器上呼叫Firebase.initializeApp()，但應用程式并未初始化