This is the 27th day of my participation in the First Challenge 2022.

The React framework is results-oriented for those who have just learned the Front Three and want to learn the React framework quickly (history and unnecessary introductions are omitted).

• Quick Start
• The road to React

children prop

You can think of a component with a child prop as having a “hole” that can be “filled in” by its parent components with arbitrary JSX.

We’ll use the React element with the React Children Prop just like we use the HTML open and close tag, passing the text “Search:” from the top instead of using the label prop:

const App = () = >{...return (
    <>
      <InputWithLabel
        id="search"
        value={searchTerm}
        onInputChange={handleSearch}
      >
        <strong>Search:</strong>
      </InputWithLabel>

      <hr />
      <List list={searchedStories} />
    </>
  );
};

const InputWithLabel = ({
  id,
  value,
  type = "text",
  onInputChange,
  children,
}) = > (
  <>
    <label htmlFor={id}>{children}</label>
    &nbsp;&nbsp;
    <input id={id} type={type} value={value} onChange={onInputChange} />
  </>
);
Copy the code

We can pass any JSX element such as string, HTML element , and component as React Children. With this feature, we can interweave the React component just as we use HTML elements.

Instruction type React

From JSX to Hook, we’ve always told React what to render, not how to render it, so React is inherently declarative.

However, this is not always possible. In some cases, it is necessary to access rendered JSX elements in a directive manner. For example, we need to call the DOM API focus() method to add an autofocus function to the search box.

• To set the value of an attribute:

const App = () = >{...return (
    <>
      <InputWithLabel
        id="search"
        value={searchTerm}
        onInputChange={handleSearch}
        isFocused
      >
        <strong>Search:</strong>
      </InputWithLabel>

      <hr />
      <List list={searchedStories} />
    </>
  );
};

const InputWithLabel = ({
  id,
  value,
  type = "text",
  onInputChange,
  children,
  isFocused,
}) = > (
  <>
    <label htmlFor={id}>{children}</label>
    &nbsp;&nbsp;
    <input
      id={id}
      type={type}
      value={value}
      onChange={onInputChange}
      autoFocus={isFocused}
    />
  </>
);
Copy the code

• The DOM API is called programmatically:

const InputWithLabel = ({
  id,
  value,
  type = "text",
  onInputChange,
  children,
  isFocused,
}) = > {
  const inputRef = React.useRef();	/ / 1
  React.useEffect(() = > {  / / 3
    if (isFocused && inputRef.current) {
      inputRef.current.focus();  / / 4
    }
  }, [isFocused]);

  return (
    <>
      <label htmlFor={id}>{children}</label>
      &nbsp;&nbsp;{/ * * / 2}<input
        ref={inputRef}
        id={id}
        type={type}
        value={value}
        onChange={onInputChange}
      />
    </>
  );
};
Copy the code

1. First, use the useRef hook to create a ref, which is a reference object. It remains constant throughout the life of the component, exposing a mutable current property and initializing the passed parameter as the current property value.
2. After passing the REF object to the input box via JSX’s REF tag, the DOM node is assigned the current property, that isinputRef.currentYou now point to the input box node mounted on the DOM.
3. Call useEffect Hook to focus on the input box when the component renders or the dependent array changes.
4. And finally, when set upisFocusedWhen the current attribute exists, the current attribute accesses the input box to realize automatic focusing.

Essentially, useRef is like a “box” that can hold a mutable value in its .current property.

This means that we get the DOM node through the useRef hook and call the DOM API to convert the original declarative to directive. See the official documentation for more useRef usage.

column

Because clocking in is daily, it can be short, so check out the React Primer.

After the update, it will be integrated into a whole article, thanks for your attention and thumbs up!