REACT小练习

react组件间props传递

function Detail({content,active}){
    return(
        <div>
            <p>{content}</p>
            <p>{active?'已激活':'未激活'}</p>
        </div>
    )

}

function Article ({title,detailData}){
    return(
        <div>
            <h1>{title}</h1>
            <Detail {...detailData}/>
        </div>
    )

}
export default function HomePage() {
    const articleData={
        title:'文章标题',
        detailDate:{
            content:'内容',
            active:true,
        }
    }
  return (
      <>
      <Article {...articleData}/>
      </>
  );
}

 

react children 传递组件

function List({title,footer,children}){
    return(
        <>
        <h2>{title}</h2>
            <ul>
            {children}
            </ul>
            {footer}
        </>
    )

}


export default function HomePage() {

  return (
      <>
      <List
       title="标题1"
       footer="底部1"
      >
          <li>内容1</li>
          <li>内容1</li>
          <li>内容1</li>
      </List>
      </>

  );
}

子组件向父组件传值

import {useState} from "react";

function Detail ({handleActive}) {
    const [status,setStatus] = useState(false)
    function handleClick (){
        setStatus(!status)
        handleActive(status)
    }
    return (

        <div>
            <button onClick={handleClick}>Click</button>

            <p style={{display:status?'block':'none'}}>Detail的内容</p>
        </div>

    )
}


export default function HomePage() {
function handleActive (status){
    console.log(status)
}
  return (
      <>
          <Detail handleActive={handleActive} />
      </>
  );
}

HOOKS :useReducer

import {useReducer,useState} from "react"
function reducer(state,action){
    if(action.type==='go'){
        return {age:state.age+1}
    };
    
}
export default function HomePage() {
const [state,dispatch]=useReducer(reducer,{age:42});
  return (
      <>
      <button onClick={()=>dispatch({type:'go'})}>
          plus
      </button>
          <p>hello you are {state.age}</p>
      </>
  );
}

HOOKS :useRef 保留上一次值的用法：

import {useRef,useState} from 'react'
export default function HomePage() {
const [count, setCount] = useState(0);
const prevCount = useRef();
function handleClick(){
    prevCount.current= count;
    setCount(count+1)
}
return (
    <div>
        <p>last count:{prevCount.current}</p>
        <p>current count:{count}</p>
        <button onClick={handleClick}>add</button>
    </div>
  );
}

HOOKS :useRef 和标签绑定：

import {useState,useRef} from "react"
export default function App() {
    const inputRef=useRef(null)
    function handleClick(){
        inputRef.current.focus()
    }

    return (
        <div>
            <input type="text" ref={inputRef} />
            <button onClick={handleClick}>button</button>
        </div>
    )
}