Render props

Analogiškai, kaip SLOT paternas, tik sudėtingesnis. Komponentai turi daug atsakomybės. Bet mes negalime panaudoti SLOT, nes vaikiniai komponentai priklausomi nuo local state. Mes galime naudoti vaikinių komponentai per propsus strategiją. Galime paimti ne React komponentą, bet STATE giją, kurie piešia vaikinius komponentus.

Buvo:

  graph TD;
      APP-->ComponentA;
      STATE-->ComponentA;
      ComponentA-->ComponentB;

Tapo:

  graph TD;
      APP-->ComponentA;
      STATE-->ComponentA;
      APP-->ComponentB;

Render props perduodami

Pavyzdys

SLOT komponentai nesusieti, JSX perduodami per props. TracksTable ir TracksDayHeadCell nesusieti.

<TracksTable
  tableContainerRef={tableContainerRef}
  days={getVisibleDays().map((day) => (
    <TracksDayHeadCell
      key={day}
      day={day}
      selectedMonth={selectedMonth}
      selectedYear={selectedYear}
      currentDayRef={currentDayRef}
      getweekday={getWeekday}
    />
))}

Modifikakuojame vaiką:

• dabar grąžina reactnode days: (ref: React. RefObject<HTMLTableCellElement>) => React.ReactNode; ir children: React.ReactNode;
• iškviečiame perduotą funkciją {days(currentDayRef)}

export function TracksTable({
  days,
  children,
}:{
  days: (ref: React. RefObject<HTMLTableCellElement>) => React.ReactNode;
  children: React.ReactNode;
}) {
...
return (
  <div className={styles.tableContainer) ref={tableContainerRef}>
    <table className={styles table}>
      <thead>
        <tr>
          <th>Task</th>
          {days(currentDayRef)}
          <th>Total</th>
        </tr>
      </thead>
      <tbody>{children}</tbody>1,0x
    </table>
  </div>

Dabar render props - renderinimui perduodamas lokalus state/props

<TracksTable
  days (currentDayRef) =>
    getVisibleDays().map((day) => (
      <TracksDayHeadCell
        key={day}
        day={day}
        selectedMonth={selectedMonth}
        selectedYear={selectedYear}
        currentDayRef={currentDayRef}
        getWeekday={getWeekday}
      />
    ))
  }
>

Pavyzdys

  graph TD;
      OP(["Outside props"])-->FNC;
      IP(["Inside props"])-->FNC;
      FNC-->Component;

• render props renderTask={(task) => (
• render props getDayTracks(day, task)

renderTask={(task) => (
  <TracksTaskRow
    getTaskTotal={getTaskTotal}
    task={task}
    days={getVisibleDays().map((day) => (
      <TracksCell
        day={day}
        task={task}
        getDayTracks={getDayTracks}
        handleCellClick={handleCellClick}
        tracks={getDayTracks(day, task).map((track) =>
          <TableTrack
            key={track.id}
            track={track}
            actions={
              <TracksActions
                track={track}
                handleUpdateTrack={handleUpdateTrack}
                handleDeleteTrack={handleDeleteTrack}
              />
          ))}
/> ))}

Pliusai

• Tas pats, kas su SLOT
• Leidzia inkapsuliuoti STATE

Minusai

• Sunku suprasti kodą
• Sunku junior programuotojams

Svarbu

• naudoti atsargiai, kartais lengviau pakeisti į local global state