geekeast / react-hooks-examples Goto Github PK

// userContext.js
import { createContext } from 'react';

const UserContext = createContext([
  {
    firstName: 'Bob',
    lastName: 'Bobberson',
    suffix: 1,
    email: '[email protected]'
  },
  obj => obj
])
const { Provider } = UserContext;
export { Provider, UserContext }

const UseContext = () => {
  // 这个才是人类理解的默认值，可通过setContext来变更
  const user = useState({
    firstName: 'James',
    lastName: 'Tan',
    suffix: 1,
    email: '[email protected]'
  })

  return (
    <div>
      <Provider value={user}>
        <h1>1st level</h1>
        <Level2></Level2>
      </Provider>
    </div>
    //  
  )
}

const Level5 = () => {
  // 接收context
  const [user, setUser] = useContext<any>(UserContext);
  return (
    <div>
      <h5>{`${user.firstName} ${user.lastName} the ${user.suffix} born`}</h5>
      <button onClick={() => { setUser({ ...user, suffix: user.suffix + 1 }) }}>Increment</button>
    </div>
  )
}

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;