React Hooks Usage Examples

A simple component example
More complex parent-child component case

How to write onSelect
React.Children
React.cloneElement
How to pass parent component data to child components
index data transfer

References

This article shares two simple examples developed using React Hooks and functional components.

A simple component example

The Button component should be considered the simplest commonly used basic component. When we develop a component, we expect its basic style to vary to a certain extent so that it can be applied to different scenarios. The second point is that when I was working on a project before, I wrote a function component, but this function component was written very rigidly, that is, there was no way to bind basic methods to it. That is, I can only write methods or characteristics that I already have. I want to write a Button component. Even if I don't write an onClick method, I want to be able to use the default basic methods that come with it.

For the first point, it is easier to implement by writing different css for different classNames.

The second point is slightly more difficult to achieve. We can't write all the default properties of Button again, it would be nice if we could import all the default properties.

In fact, React has already helped us achieve this. React.ButtonHTMLAttributes<HTMLElement> contains the default Button attributes. But we can't use this interface directly, because our Button component may have some customized things. For this, we can use Typescript's cross-type

type NativeButtonProps = MyButtonProps & React.ButtonHTMLAttributes<HTMLElement>

In addition, we also need to use resProps to import other non-custom functions or properties.

The following is the specific implementation of the Button component:

import React from 'react'
import classNames from 'classnames'

type ButtonSize = 'large' | 'small'
type ButtonType = 'primary' | 'default' | 'danger'

interface BaseButtonProps {
 className?: string;
 disabled?: boolean;
 size?: ButtonSize;
 btnType?: ButtonType;
 children?: React.ReactNode;
}

type NativeButtonProps = BaseButtonProps & React.ButtonHTMLAttributes<HTMLElement>
const Button: React.FC<NativeButtonProps>= (props) => {
 const {
 btnType,
 className,
 disabled,
 size,
 children,
 //resProps is used to retrieve all remaining properties...resProps
 } = props
 // btn, btn-lg, btn-primary
 const classes = classNames('btn', className, {
 [`btn-${btnType}`]: btnType,
 [`btn-${size}`]: size,
 'disabled': disabled
 })
 return (
 <button
  className={classes}
  disabled={disabled}
  {...resProps}
 >
  {children}
 </button>
 )
}

Button.defaultProps = {
 disabled: false,
 btnType: 'default'
}

export default Button

In the above way, we can use the onClick method in our custom Button component. The following are examples of using the Button component:

<Button disabled>Hello</Button>
<Button btnType='primary' size='large' className="haha">Hello</Button>
<Button btnType='danger' size='small' onClick={() => alert('haha')}>Test</Button>

The display effect is as follows:

In this code, we introduced a new npm package called classnames. For specific usage, please refer to GitHub Classnames. It can be used to easily implement the extension of className. A simple usage example is as follows:

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

By using classNames, you can easily add personalized attributes to Button. You can see that there is hahaclassName in the HTML output of the component:

<button class="btn haha btn-primary btn-lg">Hello</button>

At the same time, the above code method also solves the problem that custom components cannot use default properties and methods.

More complex parent-child component case

Next we will show you how to use function components to complete a menu function. This menu adds two functional modes: horizontal mode and vertical mode. Click on a menu detail and use this detail as a child component.

Of course, the menu function does not require the parent component to pass data to the child component (the child component refers to the menu details). In order to learn and demonstrate how to pass parent component data to the child component, we forcibly add this function to it. It's a bit superfluous, I hope everyone understands it.

First, the functional description of the parent and child components is introduced. Menu is the overall parent component, MenuItem is each specific small menu, and SubMenu contains a drop-down menu that can be clicked.

The following figure shows what it looks like after expansion:

The overall code structure is as follows:

<Menu defaultIndex={'0'} onSelect={(index) => {alert(index)}} mode="vertical" defaultOpenSubMenus={['2']}>
 <MenuItem index={'0'}>
 cool link
 </MenuItem>
 <MenuItem index={'1'}>
 cool link 2
 </MenuItem>
 <SubMenu title="dropdown">
 <MenuItem index={'3'}>
  dropdown 1
 </MenuItem>
 <MenuItem index={'4'}>
  dropdown 2
 </MenuItem>
 </SubMenu>
 <MenuItem index={'2'}>
 cool link 3
 </MenuItem>
</Menu>

In this component, we used useState. In addition, because it involves passing data from the parent component to the child component, we also used useContext (passing data from the parent component to the child component means passing the index data of the parent component to the child component). In addition, we will also demonstrate the use of custom onSelect to implement onClick functionality (in case you fail to introduce React generics, or don’t know which React generics to introduce, you can use custom ones to remedy the situation).

How to write onSelect

In order to prevent it from being difficult to find onSelect in the vast ocean of code later, here is a simple example of writing onSelect. For example, we use onSelect in the Menu component, and its usage looks the same as onClick:

<Menu onSelect={(index) => {alert(index)}}>

In this specific Menu component, the onSelect method can be written as follows:

type SelectCallback = (selectedIndex: string) => void

interface MenuProps {
 onSelect?: SelectCallback;
}

The method to implement handleClick can be written like this:

 const handleClick = (index: string) => {
 // onSelect is a union type, which may or may not exist, so we need to make a judgment if (onSelect) {
  onSelect(index)
 }
 }

When you want to pass this onSelect to the child component, just use onSelect: handleClick to bind it. (Maybe you didn’t understand it very well, and I don’t know how to write it either. There will be an overall code analysis later, and it may be easier to understand if you read it together)

React.Children

Before explaining the specific code, there are a few more small knowledge points, one of which is React.Children.

React.Children provides utility methods for working with the this.props.children opaque data structure.

Why do we need to use React.Children? This is because when it comes to passing parent component data to child components, the child components may need to be traversed twice or further processed. But we cannot guarantee whether there are subcomponents or not, or whether there are one, two, or more.

There are three possible values for this.props.children: if the current component has no child nodes, it is undefined; if there is one child node, the data type is object; if there are multiple child nodes, the data type is array. Therefore, be careful when handling this.props.children[1].

React provides a utility method React.Children to handle this.props.children. We can use React.Children.map to iterate over child nodes without having to worry about whether the data type of this.props.children is undefined or object[1].

Therefore, if there are parent-child components, if we need to further process the child components, we can use React.Children to traverse them, so that there will be no errors due to changes in the type of this.props.children.

React.cloneElement

React.Children may often appear together with React.cloneElement. Therefore, we also need to introduce React.cloneElement.

When developing complex components, we often need to add different functions or display effects to child components as needed. React elements themselves are immutable objects. props.children is not actually the children themselves, but only the children’s descriptor. We cannot modify any of its properties and can only read its contents. Therefore, React.cloneElement allows us to copy its elements and modify or add new props to achieve our goals [2].

For example, sometimes we need to do further processing on child elements, but because the React element itself is immutable, we need to clone it for further processing. In this Menu component, we hope that its subcomponents can only be of two types: MenuItem or SubMenu. If it is of other types, a warning message will be reported. Specifically, the code can be roughly written as follows:

if (displayName === 'MenuItem' || displayName === 'SubMenu') {
 // Clone and return a new React element with element as the sample. The first parameter is the cloned sample. return React.cloneElement(childElement, {
 index: index.toString()
 })
} else {
 console.error("Warning: Menu has a child which is not a MenuItem component")
}

How to pass parent component data to child components

Context is used to pass parent component data to child components. If you are not familiar with Context, you can refer to the official document, Context. In the parent component, we create Context through createContext, and in the child component, we get Context through useContext.

index data transfer

The main variable for implementing data transfer between parent and child components in the Menu component is index.

Finally, the complete code is attached. First is the Menu parent component:

import React, { useState, createContext } from 'react'
import classNames from 'classnames'
import { MenuItemProps } from './menuItem'

type MenuMode = 'horizontal' | 'vertical'
type SelectCallback = (selectedIndex: string) => void

export interface MenuProps {
 defaultIndex?: string; // Which menu subcomponent is used to highlight className?: string;
 mode?: MenuMode;
 style?: React.CSSProperties;
 onSelect?: SelectCallback; // Clicking a submenu can trigger a callback defaultOpenSubMenus?: string[]; 
}

// Determine the data type passed from the parent component to the child component interface IMenuContext {
 index: string;
 onSelect?: SelectCallback;
 mode?: MenuMode;
 defaultOpenSubMenus?: string[]; // Need to pass data to context
}

// Create a context to pass to the child component
// Generic constraint, because index is the value to be entered, so write a default initial value here export const MenuContext = createContext<IMenuContext>({index: '0'})

const Menu: React.FC<MenuProps> = (props) => {
 const { className, mode, style, children, defaultIndex, onSelect, defaultOpenSubMenus} = props
 // There should be only one MenuItem in the active state, use useState to control its state const [ currentActive, setActive ] = useState(defaultIndex)
 const classes = classNames('menu-demo', className, {
 'menu-vertical': mode === 'vertical',
 'menu-horizontal': mode === 'horizontal'
 })

 // Define handleClick to implement the change of active after clicking menuItem const handleClick = (index: string) => {
 setActive(index)
 // onSelect is a union type, which may or may not exist, so we need to make a judgment if (onSelect) {
  onSelect(index)
 }
 }

 // When clicking a subcomponent, trigger the onSelect function and change the highlight display const passedContext: IMenuContext = {
 // currentActive is of type string | undefined, and index is of type number, so we need to make the following judgment to further clarify the type index: currentActive ? currentActive : '0',
 onSelect: handleClick, // callback function, whether to trigger when clicking a subcomponent mode: mode,
 defaultOpenSubMenus,
 }

 const renderChildren = () => {
 return React.Children.map(children, (child, index) => {
  // child contains a lot of types. To get the type we want to provide smart prompts, we need to use type assertion const childElement = child as React.FunctionComponentElement<MenuItemProps>
  const { displayName } = childElement.type
  if (displayName === 'MenuItem' || displayName === 'SubMenu') {
  // Clone and return a new React element with element as the sample. The first parameter is the cloned sample. return React.cloneElement(childElement, {
   index: index.toString()
  })
  } else {
  console.error("Warning: Menu has a child which is not a MenuItem component")
  }
 })
 }
 return (
 <ul className={classes} style={style}>
  <MenuContext.Provider value={passedContext}>
  {renderChildren()}
  </MenuContext.Provider>
 </ul>
 )
}

Menu.defaultProps = {
 defaultIndex: '0',
 mode: 'horizontal',
 defaultOpenSubMenus: []
}

export default Menu

Then the MenuItem subcomponent:

import React from 'react'
import { useContext } from 'react'
import classNames from 'classnames'
import { MenuContext } from './menu'

export interface MenuItemProps {
 index: string;
 disabled?: boolean;
 className?: string;
 style?: React.CSSProperties;
}

const MenuItem: React.FC<MenuItemProps> = (props) => {
 const { index, disabled, className, style, children } = props
 const context = useContext(MenuContext)
 const classes = classNames('menu-item', className, {
 'is-disabled': disabled,
 // Implement the specific logic of highlighting 'is-active': context.index === index
 })
 const handleClick = () => {
 // After disabled, onSelect cannot be used. Since index is optional, it may not exist. You need to use typeof to make a judgment if (context.onSelect && !disabled && (typeof index === 'string')) {
  context.onSelect(index)
 }
 }
 return (
 <li className={classes} style={style} onClick={handleClick}>
  {children}
 </li>
 )
}

MenuItem.displayName = 'MenuItem'
export default MenuItem

Finally, the SubMenu subcomponent:

import React, { useContext, FunctionComponentElement, useState } from 'react'
import classNames from 'classnames'
import { MenuContext } from './menu'
import { MenuItemProps } from './menuItem'

export interface SubMenuProps {
 index?: string;
 title: string;
 className?: string
}

const SubMenu: React.FC<SubMenuProps> = ({ index, title, children, className }) => {
 const context = useContext(MenuContext)
 // Next we will use some methods of string array, so first make a type assertion and assert it as string array type const openedSubMenus = context.defaultOpenSubMenus as Array<string>
 // Use include to determine if there is an index
 const isOpened = (index && context.mode === 'vertical') ? openedSubMenus.includes(index) : false
 const [ menuOpen, setOpen ] = useState(isOpened) // isOpened returns true or false, which is a dynamic value const classes = classNames('menu-item submenu-item', className, {
 'is-active': context.index === index
 })
 // Used to display or hide the drop-down menu const handleClick = (e: React.MouseEvent) => {
 e.preventDefault()
 setOpen(!menuOpen)
 }
 let timer: any
 // toggle is used to determine whether to open or close const handleMouse = (e: React.MouseEvent, toggle: boolean) => {
 clearTimeout(timer)
 e.preventDefault()
 timer = setTimeout(()=> {
  setOpen(toggle)
 }, 300)
 }
 // Ternary expression, vertical const clickEvents = context.mode === 'vertical' ? {
 onClick: handleClick
 } : {}
 const hoverEvents = context.mode === 'horizontal' ? {
 onMouseEnter: (e: React.MouseEvent) => { handleMouse(e, true) },
 onMouseLeave: (e: React.MouseEvent) => { handleMouse(e, false) },
 } : {}

 // Used to render the contents of the drop-down menu // Returns two values, the first is child, the second is index, represented by i const renderChildren = () => {
 const subMenuClasses = classNames('menu-submenu', {
  'menu-opened': menuOpen
 })
 // The following function is used to implement that there can only be MenuItem in subMenu
 const childrenComponent = React.Children.map(children, (child, i) => {
  const childElement = child as FunctionComponentElement<MenuItemProps>
  if (childElement.type.displayName === 'MenuItem') {
  return React.cloneElement(childElement, {
   index: `${index}-${i}`
  })
  } else {
  console.error("Warning: SubMenu has a child which is not a MenuItem component")
  }
 })
 return (
  <ul className={subMenuClasses}>
  {childrenComponent}
  </ul>
 )
 }
 return (
 // Expand operator, add functionality inside, hover outside <li key={index} className={classes} {...hoverEvents}>
  <div className="submenu-title" {...clickEvents}>
  {title}
  </div>
  {renderChildren()}
 </li>
 )
}

SubMenu.displayName = 'SubMenu'
export default SubMenu

References

React.Children usage
Use of React.cloneElement

The above is the details of the usage example of React Hook. For more information about the use of React Hook, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:

5 things to note when writing React components using hooks
React hooks introductory tutorial
Example code for developing h5 form page based on react hooks and zarm component library configuration
More than 100 lines of code to implement react drag hooks
Introduction and usage tutorial of hook in react
Detailed explanation of how to use React Hooks to request data and render
Detailed explanation of the usage of react hooks
React Hooks implementation and origin and detailed explanation of the problems it solves
How to unit test react hooks
React uses Hooks to simplify state binding of controlled components
Common usage of hook in react

<<: Mysql 5.6 adds a method to modify username and password

>>: Nginx uses ctx to realize data sharing and context modification functions