在组件之间拆分显示道具数据答案

【问题标题】：Splitting display of prop data between components在组件之间拆分显示道具数据
【发布时间】：2019-10-03 14:56:48
【问题描述】：

我有一个主细节 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>

Tasks 有许多其他属性，例如描述、注释、end_date 等。当用户单击一个项目时，我希望其余部分显示在另一个组件中，该组件是右侧边栏，它是一个功能组件。我目前在以状态保存的项目数组中使用硬编码数据。我想知道这是否应该是具有状态而不是功能组件的类组件......嗯。

右侧边栏：

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>
);

当我这样做时....我收到错误“未定义任务”不知何故我的道具没有到达这里。谢谢大家！

【问题讨论】：

标签： javascript reactjs ecmascript-6

【解决方案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>

【讨论】：

不起作用：TypeError：无法读取未定义的属性“forEach”
我没有使用 forEach()。我的代码中的 forEach() 在哪里？
我知道。真是疯了。我对价差所做的一定是不正确的。谢谢！

【解决方案2】：

你必须在你的Detailscomponent 中传递道具

<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>

然后在详情中

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>
);

【讨论】：

【解决方案3】：

使用destructuring assignment 获取其余的道具：

<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>

【讨论】：