你将如何使用 React js 呈现这个简单的 UI？答案

【问题标题】：How would you render this simple UI using React js?你将如何使用 React js 呈现这个简单的 UI？
【发布时间】：2017-02-21 23:53:42
【问题描述】：

我是 React 新手，我想渲染图片中显示的 UI。

说明： UI 由 sidenav 和显示容器两个主要组件组成。侧面导航显示该给定选项卡的标题和问题/答案对的数量。当用户点击侧边导航的选项卡时，显示容器将所选选项卡输出为带有问题/答案对的标题，请参阅 api。

EX：用户点击侧边导航的tab2，显示容器会显示 Tab2

问题 C 回答问题 C

问题 D 回答问题 D

问题 E 回答问题 E

并且侧面导航选项卡 2 将显示 3，因为有 3 个问题/答案对。

[IMG]http://imgur.com/fR4DVoP[/IMG] http://imgur.com/fR4DVoP

数据将从 json 格式的 api 获取 [ {'Tab1'：[ { '问题'：'问题A'， “答案”：“问题 A 的答案” }, { '问题'：'问题B'， '答案'：'问题B的答案' } ], “标签2”：[ { '问题'：'问题C'， “答案”：“问题 C 的答案” }, { '问题'：'问题D'， “答案”：“问题 D 的答案” }, { '问题'：'问题E'， “答案”：“问题 E 的答案” } ] //... tab3, tab4, 以此类推... }

【问题讨论】：

标签： api user-interface reactjs single-page-application

【解决方案1】：

你读过reac-router 教程吗？如果不是这里是link。

请仔细阅读，之后，您将很好地了解如何使用 React Router Links 以简单的方式完成您的要求。

或者签出这个 repo Starter Kit 作为起点

【讨论】：

谢谢。如果我理解正确，反应路由器将用于 sidenav 显示和显示正确的选项卡。我用什么来读取和显示 api？我应该特别注意什么？
哈哈，如果你读过 reactjs，你会知道它只是 MVC 中的 V，“剩下的工作”由你来完成。
如果你愿意，你可以使用 ... isomorphic fetch 来获取 api 数据 ... redux 来存储状态 .... 并响应路由器在屏幕之间切换！我很乐意为您提供一些要点作为起点！
天啊，那太棒了！请
@Regex102 您可以定义快速路由/反应控制器来处理获取。或者，Davids 的建议也可以。