Javascript 将内容从html转换为JS文件_Javascript_Html_Reactjs_Router

Javascript 将内容从html转换为JS文件

javascript html reactjs

Javascript 将内容从html转换为JS文件,javascript,html,reactjs,router,Javascript,Html,Reactjs,Router,如果问题令人困惑，请道歉。基本上我有以下html代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>A Gentle Introduction</title> <script src="https://rawgit.com/flatiron/director/master/build/director.

如果问题令人困惑，请道歉。基本上我有以下html代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>A Gentle Introduction</title>

    <script
      src="https://rawgit.com/flatiron/director/master/build/director.min.js">
    </script>

    <script>
      var author = function () { console.log("author"); };
      var books = function () { console.log("books"); };
      var viewBook = function (bookId) {
        console.log("viewBook: bookId is populated: " + bookId);
      };

      var routes = {
        '/author': author,
        '/books': [books, function() {
          console.log("An inline route handler.");
        }],
        '/books/view/:bookId': viewBook
      };

      var router = Router(routes);

      router.init();
    </script>
  </head>

  <body>
    <ul>
      <li><a href="#/author">#/author</a></li>
      <li><a href="#/books">#/books</a></li>
      <li><a href="#/books/view/1">#/books/view/1</a></li>
    </ul>
  </body>
</html>


温和的介绍
var author=function（）{console.log（“author”）；}；
var books=function（）{console.log（“books”）；}；
var viewBook=函数（bookId）{
log（“viewBook:bookId已填充：“+bookId”）；
};
变量路由={
“/作者”：作者，
“/books”：[books，function（）{
log（“内联路由处理程序”）；
}],
“/books/view/：bookId”：viewBook
};
var路由器=路由器（路由）；
router.init（）；

这显然是在一个.html文件中。我想把它改成一个.js文件，这样我就可以把html放在js中，这样当单击不同的链接时，路由/返回的内容就不同了

我真的不知道如何直接将其放入javascript文件，然后让路由器工作。这就是html文件的来源，我正在尝试使用这个flatiron/director路由器

任何帮助都会很好

我能够使用react和jsx以及react自身外部的路由代码使其工作

使用es6/es2015编写

app.js

const author = () => { console.log("author"); };
const books = () => { console.log("books"); };
const viewBook = (bookId) => { console.log("viewBook: bookId is populated: " + bookId); };

const routes = {
  '/author': author,
  '/books': [books, () => { console.log("An inline route handler."); }],
  '/books/view/:bookId': viewBook
};

const router = Router(routes);

router.init();

class SampleRouting extends React.Component {
  render() {
    return (
      <ul>
        <li><a href="#/author">#/author</a></li>
        <li><a href="#/books">#/books</a></li>
        <li><a href ="#/books/view/1">#/books/view/1</a></li>
      </ul>
    )
  }
}

React.render( <SampleRouting/> , document.getElementById('root'));

constauthor=（）=>{console.log（“author”）；}；
constbooks=（）=>{console.log（“books”）；}；
const viewBook=（bookId）=>{console.log（“viewBook:bookId已填充：“+bookId”）；}；
常数路由={
“/作者”：作者，
“/books”：[books，（）=>{console.log（“内联路由处理程序”）；}，
“/books/view/：bookId”：viewBook
};
常数路由器=路由器（路由）；
router.init（）；
类SampleRouting扩展了React.Component{
render（）{
返回(





)
}
}
React.render（，document.getElementById（'root'））；

index.html

<div id="root"></div>

示例：

_编辑app.js以反映状态和页眉的更新

class App extends React.Component {
 constructor(props) {
    super(props);
    this.state = { currentPage: 'author' }
 }

  componentDidMount() {
    const author = () => { this.setState({currentPage: 'author'}) };
    const books = () => { this.setState({currentPage: 'Books'}); };
    const viewBook = (bookId) => { this.setState({currentPage: 'Book ' + bookId }); };
    const routes = {
      '/author': author,
      '/books': books,
      '/books/view/:bookId': viewBook
    };
    const router = Router(routes);
    router.init();
  }

  render() {
    return (
      <div>
        <h1>{ this.state.currentPage }</h1>
        <SampleRouting />
      </div>
    );
  }
}

// stateless function
const SampleRouting = () => {
   return (
      <ul>
        <li><a href="#/author">#/author</a></li>
        <li><a href="#/books">#/books</a></li>
        <li><a href ="#/books/view/1">#/books/view/1</a></li>
      < /ul>
    )
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={currentPage:'author'}
}
componentDidMount（）{
const author=（）=>{this.setState（{currentPage:'author'}）}；
constbooks=（）=>{this.setState（{currentPage:'books'}）；}；
const viewBook=（bookId）=>{this.setState（{currentPage:'Book'+bookId}）；}；
常数路由={
“/作者”：作者，
“/书籍”：书籍，
“/books/view/：bookId”：viewBook
};
常数路由器=路由器（路由）；
router.init（）；
}
render（）{
返回(
{this.state.currentPage}
);
}
}
//无状态函数
const SampleRouting=（）=>{
返回(





)
}

我知道你在那里做了些什么，但是当我点击AUTHOR时，你会如何返回say AUTHOR PAGE，当我点击BOOK时，如何返回BOOK PAGE？你可以使用

this.setState

对你在routes中设置的函数进行设置。我更新了这支笔。我创建了一个容器React元素来处理应用程序的状态。