Vlad024
@Vlad024

Как использовать один компонент но с частью данных?

Тут накидал пример - https://stackblitz.com/edit/react-nwxse1?file=src/...

Допустим
<Todos/> - список тудушек, где используется компонент <TodoItem/>
<App/> - страница со списком тудушек <Todos/>
<Header /> - в нем тоже<Todos/> который появляется по наведению на Link2, но тут должна выводится часть инфы, например только заголовки:

Как правильно использовать <TodoItem/> для вывода разного набора данных из одного источника?
Мысль пока только одна, прокидывать данные через <Todos/>.

То есть для страницы будет условно <Todos todosFull="{...}"/>
В шапке меняем <TodoItem/> на <Todos todosShort="{...}"/>, переписать в компоненте <TodoItem/> логику вывода, проверять какой пропс передан и сделать условный рендеринг.

Или как правильно делать?
  • Вопрос задан
  • 51 просмотр
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F
Не надо никаких "частей данных", условного рендеринга и т.д. Сделайте разные TodoItem и передавайте их в Todos:

const Todos = ({ todos, TodoItem }) => (
  <div className="todos">
    {todos.map(n => (
      <div className="todo-item" key={n.id}>
        <TodoItem todo={n} />
      </div>
    ))}
  </div>
);

const HeaderTodoItem = ({ todo }) => (
  <h3>{todo.title}</h3>
);

const AppTodoItem = ({ todo }) => (
  <>
    <img src={todo.img} alt={todo.title} />
    <div>
      <h3>{todo.title}</h3>
      <p>{todo.text}</p>
    </div>
  </>
);

<Todos todos={todos} TodoItem={HeaderTodoItem} />

<Todos todos={todos} TodoItem={AppTodoItem} />
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы