将内容从html转换为ReactJS文件
Converting contents from html to ReactJS file
如果问题令人困惑,请道歉。基本上我有这个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>
它清楚地存在于.html文件中。我想把它改成一个.js文件,这样我就可以把html放在js中,这样当点击不同的链接时,路由/返回的内容就不同了。
我真的不知道如何直接将其放入javascript文件中,然后让路由器工作。这就是html文件的来源https://github.com/flatiron/director#client-侧路由,我正在尝试使用这个熨斗/控制器路由器。
任何帮助都会很棒!
我能够使用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'));
index.html
<div id="root"></div>
示例:http://s.codepen.io/oobgam/debug/vNoogO
_编辑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>
)
}
相关文章:
- 如何播放部分音频文件
- 从桌面读取python文件时高亮显示代码
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何使用WCF服务和javascript表单post上传.doc文件
- 外部js文件中的Reactjs组件有时不会加载
- 即使我正在使用未缩小的文件,ReactJS 也出现缩小错误
- 如何将文件从 ReactJS 上传到 Express 端点
- 需要 ReactJS 中另一个文件中的类
- 使用Gulp-babelify处理ReactJS JS文件时出现意外的令牌错误
- 如何在ReactJs.Net的JSX文件中使用自定义ReactJs组件
- 将内容从html转换为ReactJS文件
- ReactJS使用Flux架构生成大型JS文件,这是最佳实践
- ReactJs + Babel -使用单独的文件定义组件
- 在ReactJS中两个不同的文件之间进行对话
- ReactJS:如何解析从REST API发送的文件响应并显示它们
- 我在我的新Reactjs应用程序上得到一个404错误,它是在寻找一个main.js文件
- ReactJS -无法运行babel代码而不提供HTTP文件
- 将ReactJS对象下载为文件
- 如何在html文件中使用一个.js文件中定义的ReactJS组件
- 如何在ReactJS web应用中使用HTML文件