将组件添加到 React 页面的问题

Question

我的 核心问题 与以下内容（位于底部）更相关：how/why 我不能循环遍历数组和 return 反应组件。请参阅代码中的注释 I never see this, why can't I reach this

我正在添加一个名为 vertical-timeline-component-react (link) 的 npm 包。

使用该组件的核心结构如下：

<Timeline theme={customTheme} dateFormat='ll'>
  <Container>
    <YearContent startDate='2020/07/01' />
    <BodyContent>
      <Section title='Comment'>
        <Description text='Here is a descriptive comment about this Item' />
      </Section>
    </BodyContent>
  </Container>
  <Container>
    <YearContent startDate='2020/05/10' />
    <BodyContent>      
      <Section title='Comment'>
        <Description text='Waiting to hear back from user' />
      </Section>
      <Section title='Edit'>
        <Description text='Added new User: Sam Smith' />
      </Section>
    </BodyContent>
  </Container>
</Timeline>

我有一个 SQL Table 用于管理页面申请中所有更改的历史记录。当我return这个数据的时候，核心结构是这样的

{
"2018/02/15": [{data for section}, {data for section}]}
"2018/02/05": [{data for section}, {data for section}, {data for section}]}
"2017/12/25": [{data for section}]}

这样，我可以使用我的对象键（即开始日期）遍历时间轴的每个“容器”，并且在每个“容器”内部我可以遍历每个“部分”。

我希望所有这些都有意义。有了这些知识，这是我的代码：

// Imports here

export default function Timeline() {
  // call to server for data which is saved to results.data.history

  const history = results.data.history
  return (
    <Timeline theme={customTheme} dateFormat='ll'>
      {Object.keys(history).forEach(startDate => {
        console.log(startDate) // I can see the start date printed
        return (
          <TimelineContainer startDate={startDate} sections={history[startDate]} />
        )
      })}
    </Timeline>
  )
}

const TimelineContainer = ({startDate, sections}) => {
  console.log("Inside Container") // <--- I never see this, why can't I reach this
  console.log(startDate)
  console.log(sections)
  var timelinesections = sections.map(section => {
    return <TimelineSection
      user={section.user}
      action={section.action}
      parent_type={section.parent_type}
      parent_id={section.parent_id}
      field_type={section.field_type}
      old_value={section.old_value}
      new_value={section.new_value}
    />
  })
  return (
    <Container>
      <YearContent startDate={startDate} />
      <BodyContent>
        {timelinesections}
      </BodyContent>
    </Container>
  )
}

const TimelineSection = ({ key, user, action, parent_type, parent_id, field_type, old_value, new_value }) => {
  return (
    <Section key={key} title={parent_type + ': ' + field_type} >
      <Description variant='subtitle' text={'Subtitle if needed'} />
      <Description text={user + ' ' + action + 'ed: old value was ' + old_value + ' and new value is ' + new_value} />
    </ Section>
  )
}

我尝试使用 const ComponentName = () => {} 和 function ComponentName() {}。这不是创建 React 组件的正确方法吗？还是我做错了？

Answer 1

forEach 遍历实体并且不 return 任何东西。它只是执行以下语句。您在这里寻找.map。

将forEach替换为map

{Object.keys(history).map(startDate => {
    console.log(startDate) // I can see the start date printed
        
    return (
      <TimelineContainer key={startDate} startDate={startDate} sections={history[startDate]} />
    )
})}

将组件添加到 React 页面的问题

Issue with Adding Components to React Page

javascript

components

reactjs