Разделение отображения данных реквизита между компонентами

Question

У меня есть мастер-приложение React, которое отображает список задач в главном окне. Я хотел бы изменить цикл карты, чтобы каждый элемент был кликабельным. Когда вы нажимаете, он показывает остаток реквизита в другом компоненте ... Примерно так:

Компонент списка, который отображает элементы:

<ul>
  {project.tasks.map((task) =>
    <li key={task.id}>
      {task.title} // need to make title clickable and then
      <Details />  // pass remainder of props to another component
    </li>
  )}
</ul>

Задачи имеют множество других свойств, таких каккак описание, примечания, дата окончания и т. д. Когда пользователь нажимает на элемент, я хочу, чтобы остаток отображался в другом компоненте, который является правой боковой панелью и является функциональным компонентом. В настоящее время я использую жестко закодированные данные в массиве проектов, который сохраняется в состоянии. Мне интересно, если это должен быть класс Компонент с состоянием вместо функционального компонента ... хм.

Правая боковая панель:

const Details = (props) => (
  <div style={{
    flex: 1,
    height: '100vh',
    overflow: 'auto',
    background: '#eee'
  }}>
  <div style={{ padding: '20px' }} {...props}/>
     {task.description}
     {task.notes}
     {task.otherStuff}
  </div>
);

Когда я делаю это таким образом .... Яполучить сообщение об ошибке «задача не определена» Почему-то мои реквизиты не попадают сюда. Спасибо всем!

Answer 1

попробуй вот так

const project = {tasks: [{id: 'id1', title: 'title1', notes: 'note1', description: 'des1'}, {id: 'id2', title: 'title2', notes: 'note2', description: 'des2'}]};

const Details = ({task, ...props}) => (
  <div style={{
    flex: 1,
    overflow: 'auto',
    background: '#eee'
  }}>
  <div style={{ padding: '20px' }} {...props}/>
     <div>{task.description}</div>
     <div>{task.notes}</div>
  </div>
);

const App = () => {
  return (
    <ul>
      {project.tasks.map((task) =>
        <li key={task.id}>
          <a href="/">{task.title}</a>
          <Details task={task}/>
        </li>
      )}
    </ul>
  );
}

ReactDOM.render( < App / > , document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Answer 2

получите остальные реквизиты, используя деструктивное задание :

<ul>
  {project.tasks.map(({id, title, ...rest}) =>
    <li key={id}>
      {title} // need to make title clickable and then
      <Details remainderOfProps={rest} />  // pass remainder of props to another component
    </li>
  )}
</ul>

Answer 3

Вы должны передать реквизиты в свой Details компонент

<ul>
  {project.tasks.map((task) =>
    <li key={task.id}>
      {task.title} // need to make title clickable and then
      <Details task={task} />  // pass remainder of props to another component
    </li>
  )}
</ul>

, затем в Details

const Details = ({...props}) => ( // <---- desctructuring
  <div style={{
    flex: 1,
    height: '100vh',
    overflow: 'auto',
    background: '#eee'
  }}>
  <div style={{ padding: '20px' }} />
     {task.description}
     {task.notes}
     {task.otherStuff}
  </div>
);