Как вернуть компонент и функцию или какая альтернатива?

Question

[Реагировать] Каков "способ" отправки / совместного использования функции между компонентами?

Лучше объяснено в (бесполезном) коде

• Здесь у меня нет проблем, так как все находится в том же компоненте (https://codesandbox.io/s/compassionate-ishizaka-uzlik)

import React, { useState } from "react";


export default function App() {
  const [bookmarks, setBookmarks] = useState();
  const letbook = () => setBookmarks("hello");

  const Card = () => <div onClick={letbook}>hey</div>;

  const MyCom = () => {
    return <div><Card /></div>;
  };

  return (
    <div className="App">
      <h1 onClick={letbook}>Hello CodeSandbox</h1>
      <MyCom />
      <div>{bookmarks}</div>
    </div>
  );
}

• Но тогда, если теперь я хочу разделить код, как мне это сделать? Проблема в том, как поделиться letbook (этот код не работает)

import React, { useState } from "react";

export default function App() {
  const Card = () => <div onClick={letbook}>hey</div>;

  return (
    <div className="App">
      <h1 onClick={letbook}>Hello CodeSandbox</h1>
      <MyCom />
      <div>{bookmarks}</div>
    </div>
  );
}

const MyCom = () => {
  const [bookmarks, setBookmarks] = useState();
  const letbook = () => setBookmarks("hello");

  return (
    <div>
      <Card />
    </div>
  );
};

---

• Я мог бы использовать ловушку, которая возвращала компонент и функцию

const [letbook, MyCom] = useMyCom

Но это не рекомендуется (https://www.reddit.com/r/reactjs/comments/9yq1l8/how_do_you_feel_about_a_hook_returning_components/)

• Тогда я могу использовать крючок и компонент, как в следующем коде: но сам код кажется мне запутанным до такой степени, что я сомневаюсь, должен ли я разделять код или нет

Если (и это вопрос) существует ли более разумный способ сделать это

import React, { useState } from "react";

export default function App() {
  const [bookmarks, setBookmarks, letbook] = useMyCom();

  return (
    <div className="App">
      <h1 onClick={letbook}>Hello CodeSandbox</h1>
      <MyCom card={props => <Card letbook={letbook} />} />
      <div>{bookmarks}</div>
    </div>
  );
}

const Card = ({letbook}) => <div onClick={letbook}>hey</div>;

const useMyCom = () => {
  const [bookmarks, setBookmarks] = useState();
  const letbook = () => setBookmarks("hello");
  return [bookmarks, setBookmarks, letbook];
};

const MyCom = ({ letbook, card }) => <div>{card(letbook)}</div>;

Answer 1

Разделите ваш компонент для повторного использования, это определенно хорошая идея. Но убедитесь, что вы используете и манипулируете одним состоянием в одном файле и передаете его как реквизит. Также важно избегать повторного рендеринга вашего дочернего компонента. Только когда ваш основной компонент меняет реквизиты, необходимые для повторной визуализации вашего дочернего компонента.

import React, { useState, memo } from "react";

const MyCom = memo(props => {
  return <div>{props.bookmarks}</div>;
});

export default function App() {
  const [bookmarks, setBookmarks] = useState();
  const letbook = () => setBookmarks("hello");

  return (
    <div className="App">
      <h1 onClick={letbook}>Hello CodeSandbox</h1>
      <MyCom bookmarks={bookmarks} />
    </div>
  );
}