Javascript 使用React处理子组件

我正在尝试使用React重建

我有一个像这样的收藏：

[
        {
            title: "Google",
            url: "www.google.com"
            tab: "Tab A",
            section: "Section A"
        },
        {
            title: "Facebook",
            url: "www.facebook.com"
            tab: "Tab B",
            section: "Section A"
        },
        {
            title: "Yahoo",
            url: "www.yahoo.com"
            tab: "Tab B",
            section: "Section B"
        },
        {
            title: "Reddit",
            url: "www.reddit.com"
            tab: "Tab C",
            section: "Section A"
        }
    ]

<!-- Main Component -->
<section>
  <div class="wb-tabs">
    <div class="tabpanels">
      {{TAB}}
    </div>
  </div>
</section>

<!-- {{TAB} -->}
<details id="details-panel1">
  <summary>{{item.tab}}</summary>
  {{SECTION}}
</details>

<!-- {{SECTION}} -->
<div class="col-md-9">
  <h2 class=" bg-corp-med  h5">What’s new?</h2>
  <ul>
    {{LINKS}}
  </ul>
</div>

<!-- {{LINKS}} -->
<li>
  <a href="{{item.url}}">
    <strong>
      <span class="small">{{item.title}}</span>
    </strong>
  </a>
</li>

到目前为止，我已经能够通过调用HomeNav组件中的选项卡组件来创建选项卡：

    class Tabs extends React.Component {

  constructor(props) {
    super(props)
    this.state = { items: [], index: null }
  }

  componentDidMount() {
    // Keep the scope of this function so it can be used in checkFlag
    this.setState({
      items: this.props.items,
      index: this.props.index
    })
  }

  render() {
    var {item, index} = this.props
    return (
      <details key={item} id={"details-panel" + (++index)}>
        <summary>{item}</summary>
        <p>{"Something something" + item}</p>
      </details>
    )
  }
};

class HomeNav extends React.Component {

  constructor(props) {
    super(props)
    this.state = { items: [] }
  }

  componentDidMount() {
    // Keep the scope of this function so it can be used in checkFlag
    this.setState({
      items: data
    })
  }

  render() {
    let uniqueTabs = _.uniq(_.map(data, x => x.tab)).sort()

    let tabs = uniqueTabs.map((item, index) => {
      return (
        <Tabs key={item} item={item} index={index} />
      )
    })

    return (
      <section>
        <h3>Home Nav</h3>
        <div className="wb-tabs">
          <div className="tabpanels">
            {tabs}
          </div>
        </div>
      </section>
    )
  }
};

类选项卡扩展了React.Component{
建造师（道具）{
超级（道具）
this.state={items:[]，index:null}
}
componentDidMount（）{
//保留此函数的作用域，以便在checkFlag中使用
这是我的国家({
项目：this.props.items，
索引：this.props.index
})
}
render（）{
var{item，index}=this.props
返回(
{item}
{“某物”+项目}

)
}
};
类HomeNav扩展了React.Component{
建造师（道具）{
超级（道具）
this.state={items:[]}
}
componentDidMount（）{
//保留此函数的作用域，以便在checkFlag中使用
这是我的国家({
项目：数据
})
}
render（）{
让uniqueTabs=..uniq（..map（数据，x=>x.tab））.sort（）
让tabs=uniqueTabs.map（（项目、索引）=>{
返回(
)
})
返回(
家庭导航
{tabs}
)
}
};

据我所知，我可能需要每个部分的子组件和每个链接的另一个组件？因此，我将html分解如下：

[
        {
            title: "Google",
            url: "www.google.com"
            tab: "Tab A",
            section: "Section A"
        },
        {
            title: "Facebook",
            url: "www.facebook.com"
            tab: "Tab B",
            section: "Section A"
        },
        {
            title: "Yahoo",
            url: "www.yahoo.com"
            tab: "Tab B",
            section: "Section B"
        },
        {
            title: "Reddit",
            url: "www.reddit.com"
            tab: "Tab C",
            section: "Section A"
        }
    ]

<!-- Main Component -->
<section>
  <div class="wb-tabs">
    <div class="tabpanels">
      {{TAB}}
    </div>
  </div>
</section>

<!-- {{TAB} -->}
<details id="details-panel1">
  <summary>{{item.tab}}</summary>
  {{SECTION}}
</details>

<!-- {{SECTION}} -->
<div class="col-md-9">
  <h2 class=" bg-corp-med  h5">What’s new?</h2>
  <ul>
    {{LINKS}}
  </ul>
</div>

<!-- {{LINKS}} -->
<li>
  <a href="{{item.url}}">
    <strong>
      <span class="small">{{item.title}}</span>
    </strong>
  </a>
</li>

{{TAB}}
}
{{item.tab}
{{SECTION}}
有什么新鲜事吗？

{{LINKS}

我也不确定如何将每个对象放置在相应的选项卡和部分中。任何帮助都会很好