摘要:新搭建的個人博客,本文地址學習筆記用重寫在一開始的時候配置中我們就加入了的支持,就是下面的配置,但之前的學習筆記都使用的完成,所以專門作一篇筆記,記錄使用完成創建相關文件修改,增加該入口文件修改,引入該文件做個簡單的測試,看下瀏覽器全部用來
新搭建的個人博客,本文地址:React學習筆記3:用es2015(ES6)重寫CommentBox
在一開始的時候webpack配置中我們就加入了es2015的支持,就是下面的配置,但之前的學習筆記都使用的es5完成,所以專門作一篇筆記,記錄使用es6完成CommentBox
query: { presets: ["es2015","react"] }
1、創建相關文件
touch src/commentEs6.js //修改webpack,增加該入口文件 entry:{ "index":"./src/index.js", "comment":"./src/comment.js", "commentEs6":"./src/commentEs6.js", }, //修改build/index.html,引入該文件
2、做個簡單的測試,看下瀏覽器
//require全部用import來完成 import React from "react"; import ReactDom from "react-dom"; //es6支持類,通過類繼承完成組件的開發 class CommentBox extends React.Component { render () { returnHello World} } //渲染 ReactDom.render(,document.getElementById("content") )
3、直接貼出完整修改后的代碼
import React from "react"; import ReactDom from "react-dom"; import marked from "marked" import $ from "jquery" class CommentBox extends React.Component { constructor(props){ super(props) //state 初始化直接在構造函數完成 this.state = {data:[]} } //函數的書寫方式也發生了變化 loadCommentsFromServer(){ //還不太明白,總之this到了ajax中指向的對象就發生了變化 var url = this.props.url $.ajax({ url:url, dataType:"json", cache:false, //利用箭頭函數傳參,可以少去了bind this success:(data) => { this.setState({data: data}) }, error:(xhr,status,err) => { console.log(url,status,err.toString()) } }) } handleSubmitComment(data){ var url = this.props.url $.ajax({ url:url, type:"POST", data:data, dataType:"json", cache:false, success:(data) => { this.setState({data:this.state.data.concat(data)}); }, error:(xhr,status,err) => { console.log(this.props.url,status,err.toString()) } }) } componentDidMount(){ this.loadCommentsFromServer() //setTimeout(this.loadCommentsFromServer,2000) } render() { return () } } ReactDom.render() } } class CommentList extends React.Component{ constructor(props) { super(props) } render(){ var commentNodes = this.props.data.map(function(comment){ return (Comments
{comment.text} ) }); return ({commentNodes}) } } class Comment extends React.Component { constructor(props) { super(props) } rawMarkup(){ var rawMarkup = marked(this.props.children.toString(),{sanitize:true}) return {__html:rawMarkup} } render(){ return () } } class CommentForm extends React.Component{ constructor(props) { super(props) this.state = {author:"",text:""} } handleAuthorChange(event){ this.setState({author:event.target.value}) } handleTextChange(event){ this.setState({text:event.target.value}) } handleSubmit(event){ event.preventDefault(); var author = this.state.author.trim() var text = this.state.text.trim() if(!text||!author) { return; } this.props.onSubmitComment({author:author,text:text}); this.setState({author:"",text:""}) return false; } render(){ return ({this.props.author}
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/78580.html
摘要:瀏覽器看效果效果顯示效果就是瞎比比我不聽瞎比比解析后的文本直接被顯示在頁面上,并沒有被瀏覽器解析,這是為了防止被攻擊而作的保護措施。 新搭建的個人博客,本文地址:React學習筆記2:React官方CommentBox實踐所有的操作是繼續上一個學習筆記,參考的是React官方的CommentBox,不過不是100%按照其實現。參考:https://facebook.github.io/...
摘要:組件通信實現表單提交昨晚做了一個的例子,主要實現的是提交表單實現評論的功能,在做之前先簡單介紹一下。并稱為前端大框架,就目前來看,盡管發布了也在今年月份發布了,更不在話下,大家要是想學習的話可以去官網學習。 react組件通信實現表單提交 昨晚做了一個react的例子,主要實現的是提交表單實現評論的功能,在做之前先簡單介紹一下React。 showImg(https://segment...
摘要:例子全解析近些時間一直在關注,關于如何學習可以參照鏈接的文章自行制定計劃。千里之行,始于足下。此外,輸出的內容要解析為,而在默認情況下,基于預防攻擊的考慮,對輸出的內容是不解析為的。 React-tutorial例子全解析 Talk is cheap,Show me the code 近些時間一直在關注React,關于如何學習React可以參照鏈接的文章自行制定計劃。千里之行,始于足下...
摘要:新搭建的個人博客,本文地址學習筆記環境搭建本文的書寫環境為,之后會補充下的差異創建學習目錄初始化項目根據相關提示完善信息,入口文件安裝相關包,并且使用也就是支持,需要包,因為我之前做個一些相關項目,所以部分包已經全局安裝,比如等等,大家 新搭建的個人博客,本文地址:React學習筆記1:環境搭建 本文的書寫環境為mac,之后會補充windows下的差異 1、創建學習目錄 mkdir l...
閱讀 2751·2021-11-22 13:54
閱讀 2688·2021-10-14 09:42
閱讀 3987·2021-09-28 09:47
閱讀 2162·2021-09-03 10:28
閱讀 1203·2021-07-26 23:38
閱讀 2557·2019-08-30 15:54
閱讀 2639·2019-08-29 16:35
閱讀 1426·2019-08-29 15:42