Reactコンポーネントは、親子パラメーター転送の小道具、子親パラメーター転送のメソッド呼び出し、およびコンテキストコンテキストを並行して使用します

コードに直接移動します

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组件传参</title>
</head>
<body>
  <div id="app">
    <div className="left"></div>
    <div className="right">
    </div>
  </div>
  <script src='./lib//babel.min.js'></script>
  <script src='./lib/react.development.js'></script>
  <script src='./lib//react-dom.development.js'></script>
  <script type="text/babel">
    // 平行组件之间用useContent 上下文
    const { Component, useState, useEffect } = React
    function App() {
      return (
        <div className="container">
          <Left />
          <Right />
        </div>
      )
    }

    function MovieItem(props){ // props 传参
      const {movie, selectOne} = props  // props传参，接收movie这个自定义参数
      // const {movie, detail} = props  // props传参，接收movie这个自定义参数
      const [detail, setDetail] = usestate({}) // 影片详情
      const getMovieDetail = (item)=>{
        fetch('url'+ moi.id) // 详情
        .then(res=>res.json())
        .then((res)=>setDetail(res.datas))
      }
      return (
        <p onClick={()=>{
          // 点击事件，在执行取数据操作。
          selectOne(movie);
        }}>
          {movie.tCn}
        </p>
      )
    }

// resct父子传值使用props
// 子向父传参使用方法调用
    function Left(){
      cosnt [movies,setMovies] = useState([]) // 设置一个初始数据
      const [setecedItem, setSetecedItem] = useState({}) // 当前选中的数组传给父组件
      useEffect(()=>{
        // 发起请求fetch
        fetch('url')
        .then((res)=>res.json())
        .then((data)=>setMovies(data.datas)) // set值进行赋值
      }, [])
      return(
        <div className="left">
        <h5>{setecedItem.tCn}</h5>
          {movies.map((item)=>(
            <MovieItem key={item.id} 
              movie={item} // 组件引入，自定义参数movie给这个组件，组件上方接收
              selectOne={setSetecedItem} // 子向父传参
              /> 
          ))}
          
        </div>
      )
    }

    function Right(){
      const [detail, setDetail] = usestate({}) // 影片详情
      return(
        <div className="right">
        </div>
      )
    }
  
    ReactDOM.render(<App />, document.getElementById('app'))
  </script>
</body>
</html>

所々に問題があり、完全ではありません。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组件传参</title>
</head>
<body>
  <div id="app">
    
  </div>
  <script src='./lib//babel.min.js'></script>
  <script src='./lib/react.development.js'></script>
  <script src='./lib//react-dom.development.js'></script>
  <script type="text/babel">
    // 平行组件之间用useContext 上下文用来做组件之间的数据共享
    const { createContext, useContext } = React
    const context = createContext({
      data: 3
    })

    // Provider 提供者
    const { Provider } = context

    function MovieItem(){
      const d = useContext(context) // useContext可获取到provider中的数据
      console.log(d)
      return(
        <div className="movie">
          <p>影片信息</p>
        </div>
      )
    }

    function Left(){
      return (
        <div className="left">
          <MovieItem />
        </div>
      )
    }

    function App(){
      return(
        <div className="container">
          <Left />
        </div>
      )
    }
    ReactDOM.render(
      <Provider value={
   
   {name: 'app', age: 17}}>
        <App />
      </Provider>, document.getElementById('app'))
  </script>
</body>
</html>

ここに画像の説明を挿入

Reactコンポーネントは、親子パラメーター転送の小道具、子親パラメーター転送のメソッド呼び出し、およびコンテキストコンテキストを並行して使用します

おすすめ