Renders a list of elements from an array of primitives.

  • Use the value of the isOrdered prop to conditionally render a <ol> or <ul> list.
  • Use Array.prototype.map to render every item in data as a <li> element, give it a key produced from the concatenation of the its index and value.
  • Omit the isOrdered prop to render a <ul> list by default.

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

Renders a <textarea> element that uses a callback function to pass its value to the parent component.

  • Use object destructuring to set defaults for certain attributes of the <textarea> element.
  • Render a <textarea> element with the appropriate attributes and use the callback function in the onChange event to pass the value of the textarea to the parent.

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

Renders a slider element that uses a callback function to pass its value to the parent component.

  • Use object destructuring to set defaults for certain attributes of the <input> element.
  • Render an <input> element of type "range" and the appropriate attributes, use the callback function in the onChange event to pass the value of the input to the parent.

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

Renders a file drag and drop component for a single file.

  • Create a ref called dropRef for this component.
  • Use the React.useState() hook to create the drag and filename variables, initialized to false and '' respectively.
    The variables dragCounter and drag are used to determine if a file is being dragged, while filename is used to store the dropped file’s name.
  • Create the handleDrag, handleDragIn, handleDragOut and handleDrop methods to handle drag and drop functionality, bind them to the component’s context.
  • Each of the methods will handle a specific event, the listeners for which are created and removed in the React.useEffect() hook and its attached cleanup() method.
  • handleDrag prevents the browser from opening the dragged file, handleDragIn and handleDragOut handle the dragged file entering and exiting the component, while handleDrop handles the file being dropped and passes it to props.handleDrop.
  • Return an appropriately styled <div> and use drag and filename to determine its contents and style.
  • Finally, bind the ref of the created <div> to dropRef.

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

Renders a tag input field.

  • Define a TagInput component and use React.useState() hook to initialize an array with tags passed as props.
  • Use Array.prototype.map() on collected nodes to render the list of tags.
  • Define the addTags method, which will be executed on pressing the Enter key.
  • The addTags method uses the setTags method to add the new tag using the spread (...) operator to prepend the existing tags and adds the new tag at the end of the tags array.
  • Define the removeTags method, which will be executed on clicking the delete icon in the tag.
  • Use Array.prototype.filter() in removeTags method to remove the tag using the index of the tag to filter it out from tags array.

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

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 textarea component with a word limit.

  • Use the React.useState() hook to create the content and wordCount state variables and set their values to value and 0 respectively.
  • Create a method setFormattedContent, which uses String.prototype.split(' ') to turn the input into an array of words and check if the result of applying Array.prototype.filter(Boolean) has a length longer than limit.
  • If the afforementioned length exceeds the limit, trim the input, otherwise return the raw input, updating content and wordCount accordingly in both cases.
  • Use the React.useEffect() hook to call the setFormattedContent method on the value of the content state variable.
  • Use a<div> to wrap both the<textarea> and the <p> element that displays the character count and bind the onChange event of the <textarea> to call setFormattedContent with the value of event.target.value.

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

Renders a ticker component.

  • Use the React.useState() hook to initialize the ticker state variable to 0.
  • Define two methods, tick and reset, that will periodically increment timer based on interval and reset interval respectively.
  • Return a <div> with two <button> elements, each of which calls tick and reset respectively.

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

Renders a table with rows dynamically created from an array of primitives.

  • Render a <table> element with two columns (ID and Value).
  • Use Array.prototype.map to render every item in data as a <tr> element, consisting of its index and value, give it a key produced from the concatenation of the two.

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