React、React 路由和 HTML 模板答案

【问题标题】：React, react routing and HTML templatesReact、React 路由和 HTML 模板
【发布时间】：2017-08-08 23:48:30
【问题描述】：

我在一个大型网络项目的团队中工作。这些是涉及的技术：

Meteor：全栈 JavaScript 框架
MongoDB：数据库管理系统
React：包含在 Meteor 中作为以下 2 个主要包 react v15.6.1 和 react-router-dom v4.1.2

我的问题涉及网站的前端部分及其与已开发的早期版本的集成。前端部分的规格首先被翻译成手绘线框，然后是使用Balsamiq的数字线框。

在开发网站的第一个版本时，我使用了 React，现在我爱上了它（老实说，我也坚持使用它：D）。我通常不负责项目的前端部分，但我将负责或将其与我已经完成的工作相结合。

知道数字线框将以 HTML、CSS 和 JavaScript 编码，我的问题是：有没有办法集成/翻译/重写 HTML、CSS 和 JavaScript 模板以适应 React？

我的问题基本上可以归结为：如何将 HTML、CSS 和 JS 模板集成到 React 项目中？如果没有办法这样做，最好的方法是什么：重写我的代码，或者模板应该用 React 编写？

【问题讨论】：

标签： react-router react-router-v4 react-router-dom

【解决方案1】：

我通常做的是将文件中的 HTML 标签/元素复制到 React 的 return(){} 中，然后添加 React 组件并修改一些 css 使其看起来像你想要的那样。请记住，React 的 return(){} 基本上是渲染 HTML 加上您自己的 React 组件和 Javascript，以使它们按照您希望的方式工作。

但是，如果你只是想显示一个页面，你可以随时

import React, { Component, PropTypes } from 'react';


static contextTypes = {
  router: PropTypes.object
}
this.context.router.push('/page');

并在 route.js 文件中设置指向 HTML 页面的路径。

【讨论】：