Material-UI 在组件之间传递数据

Question

这可能看起来像一个类似的问题，但我无法在 Whosebug 上得到它的答案。
我有两个组件 - A.js 和 B.js

A.js
（以下代码在 return() ）

<Link to={{
   pathname: `${simulationId}/edit/${ruleName}`,
   search: createButtonQuery,
   previewFlag = true,
   }}>
    <IconButton color="primary" size="small">
         <PageviewOutlinedIcon/>
    </IconButton>
</Link>

B.js
（以下代码在 return() ）

<DialogTitle>{name ? 'Print true' : 'Print false'}</DialogTitle>

问题：
我想在 B.js 中测试 previewFlag。我想检查 previewFlag 何时为真且 name 存在，'Print true' 应该由 <DialogTitle>
编辑 return 我不知道如何在 B.js 中使用 previewFlag。

请注意 <PageViewOutlineIcon> 是 material-ui 的一部分。
这两个组件没有被彼此导入。

Answer 1

要使用上下文，您需要做几件事：

1：创建一个上下文文件（我通常把我的放在上下文文件夹中）

import { createContext, useContext, useEffect, useState } from 'react'
import { auth } from '../firebase'

const AuthContext = createContext()

export function useAuth() {
  return useContext(AuthContext)
}

export function AuthProvider({ children }) {
  const [currentUser, setCurrentUser] = useState()
  const [loading, setLoading] = useState(true)

  function login(email, password) {
    return auth.signInWithEmailAndPassword(email, password)
  }

  function signOut() {
    return auth.signOut();
  }

  function signUp(email, password) {
    return auth.createUserWithEmailAndPassword(email, password)
  }

  function getUser() {
    return auth.currentUser
  }

  function isAdmin() {
    return auth.currentUser.getIdTokenResult()
    .then((idTokenResult) => {
      if (!!idTokenResult.claims.admin) {
        return true
      } else {
        return false
      }
    })
  }

  function isEditor() {

  }

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(user => {
      setCurrentUser(user)
      setLoading(false)
    })

    return unsubscribe
  }, [])

  const value = {
    currentUser,
    getUser,
    login,
    signOut,
    signUp
  }

  return (
    <AuthContext.Provider value={value}>
      { !loading && children }
    </AuthContext.Provider>
  )

}

这是可以容纳任何您想检查的文件

然后，您需要将其放入 App/_app（取决于您使用 React 的方式），如本例所示：

import '../styles/globals.scss'
import { motion, AnimatePresence } from 'framer-motion'
import { useRouter } from 'next/router'
import Header from '../components/Header'
import Footer from '../components/Footer'
import { AuthProvider } from '../contexts/AuthContext'
import { CartProvider } from '../contexts/CartContext'
import { ThemeProvider } from '@material-ui/core'
import theme from '../styles/theme'


export default function App({ Component, pageProps }) {
  const router = useRouter()

  return(
    <AnimatePresence exitBeforeEnter>
      <CartProvider>
        <AuthProvider>
          <ThemeProvider theme={theme}>
            <Header />
            <motion.div key={router.pathname} className="main">
              <Component { ...pageProps } />
              <Footer />
            </motion.div>
          </ThemeProvider>
        </AuthProvider>
      </CartProvider>
    </AnimatePresence>
  )
}

然后，在您想要访问这些上下文的任何组件中，您可以调用它来使用值（或辅助函数）：

import { Alert, Grid, TextField, Button, makeStyles, Typography } from '@material-ui/core'
import { useAuth } from '../contexts/AuthContext'
import { useState } from 'react'

const theme = makeStyles({
  form: {
    width: '100vw',
    maxWidth: '400px',
    margin: 'auto',
    padding: '1rem',
  
    '& > div': {
      paddingBottom: '1rem'
    }
  }
})

export default function LoginForm() {
  const { login } = useAuth();
  const styles = theme()
  const [state, setState] = useState({
    email: "",
    password: ""
  })
  const [error, setError] = useState()
  const { googleLogin } = useAuth()

  function handleForm(e) {
    setState({
      ...state,
      [e.target.name]: e.target.value
    })
  }
  
  async function handleLogin() {
    await login(state.email, state.password)
    .catch(err => {
      console.log(err)
      setError(JSON.stringify(err))
    })
  }

  return(
    <Grid container className={styles.form} direction="column" alignContent="stretch" justify="center">
      <Grid item>
        <Typography variant="h3">Login</Typography>
      </Grid>
      <Grid item>
        {error && <Alert severity="error" variant="filled" >{error}</Alert>}
          <TextField fullWidth name="email" label="Email" variant="outlined" onChange={handleForm}/>
      </Grid>
      <Grid item>
        <TextField fullWidth name="password" type="password" label="Password" variant="outlined" onChange={handleForm} />
      </Grid>
      <Grid item>
        <Button variant="contained" color="primary"fullWidth onClick={handleLogin}>Log In</Button>
      </Grid>
    </Grid>
  )
}

请注意我如何在我的 loginForm 组件中导入 useAuth 实例（这只是我命名的上下文。你可以随便命名），然后我可以解构我的值已经暴露：const { login } = useAuth() 类似这样的东西：const { value, helperFunction } = useAuth() - 假设您要从上下文

中导出一个 value 和一个函数 helperFunction

Material-UI 在组件之间传递数据

Material-UI passing data between components

frontend

reactjs

material-ui

react-props