children标签存档

Renders a tooltip component.

  • Use the React.useState() hook to create the show variable and initialize it to false.
  • Return a <div> element that contains the <div> that will be the tooltip and the children passed to the component.
  • Handle the onMouseEnter and onMouseLeave methods, by altering the value of the show variable.

继续阅读 30秒学会 React 片段 – Tooltip

Renders an accordion menu with multiple collapsible content components.

  • Define an AccordionItem component, pass it to the Accordion and remove unnecessary nodes expect for AccordionItem by identifying the function’s name in props.children.
  • Each AccordionItem component renders a <button> that is used to update the Accordion via the props.handleClick callback and the content of the component, passed down via props.children, while its appearance is determined by props.isCollapsed and based on style.
  • In the Accordion component, use the React.useState() hook to initialize the value of the bindIndex state variable to props.defaultIndex.
  • Use Array.prototype.map on the collected nodes to render the individual collapsiple elements.
  • Define changeItem, which will be executed when clicking an AccordionItem‘s <button>.
    changeItem executes the passed callback, onItemClick and updates bindIndex based on the clicked element.

继续阅读 30秒学会 React 片段 – Accordion

Renders a carousel component.

  • Use the React.useState() hook to create the active state variable and give it a value of 0 (index of the first item).
  • Use an object, style, to hold the styles for the individual components.
  • Use the React.useEffect() hook to update the value of active to the index of the next item, using setTimeout.
  • Destructure props, compute if visibility style should be set to visible or not for each carousel item while mapping over and applying the combined style to the carousel item component accordingly.
  • Render the carousel items using React.cloneElement() and pass down rest props along with the computed styles.

继续阅读 30秒学会 React 片段 – Carousel

Renders a star rating component.

  • Define a component, called Star that will render each individual star with the appropriate appearance, based on the parent component’s state.
  • In the StarRating component, use the React.useState() hook to define the rating and selection state variables with the initial values of props.rating (or 0 if invalid or not supplied) and 0.
  • Create a method, hoverOver, that updates selected and rating according to the provided event.
  • Create a <div> to wrap the <Star> components, which are created using Array.prototype.map on an array of 5 elements, created using Array.from, and handle the onMouseLeave event to set selection to 0, the onClick event to set the rating and the onMouseOver event to set selection to the star-id attribute of the event.target respectively.
  • Finally, pass the appropriate values to each <Star> component (starId and marked).

继续阅读 30秒学会 React 片段 – StarRating

Renders a component with collapsible content.

  • Use the React.setState() hook to create the isCollapsed state variable with an initial value of props.collapsed.
  • Use an object, style, to hold the styles for individual components and their states.
  • Use a <div> to wrap both the <button> that alters the component’s isCollapsed state and the content of the component, passed down via props.children.
  • Determine the appearance of the content, based on isCollapsed and apply the appropriate CSS rules from the style object.
  • Finally, update the value of the aria-expanded attribute based on isCollapsed to make the component accessible.

继续阅读 30秒学会 React 片段 – Collapse

Renders a tabbed menu and view component.

  • Define a TabItem component, pass it to the Tab and remove unnecessary nodes expect for TabItem by identifying the function’s name in props.children.
  • Use the React.useState() hook to initialize the value of the bindIndex state variable to props.defaultIndex.
  • Use Array.prototype.map on the collected nodes to render the tab-menu and tab-view.
  • Define changeTab, which will be executed when clicking a <button> from the tab-menu.
  • changeTab executes the passed callback, onTabClick and updates bindIndex, which in turn causes a re-render, evaluating the style and className of the tab-view items and tab-menu buttons according to their index.

继续阅读 30秒学会 React 片段 – Tabs