React.js踩坑中...

阿新 • • 發佈：2019-01-23

公司新專案暫定技術使用React.js,先找幾個DEMO試試，其中語法與之前的語法有點點的區別，最坑爹的是沒有一個完美的IDE，作為腦子懶得人，沒有快捷聯想，我的天~~~廢話不多說直接上。。。

IDE：Sublime Text 3，更新ReactJS外掛，勉強使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Hello React!</title>
		<script src="js/react.min.js"></script>
		<script src="js/react-dom.min.js"></script>
		<script src="js/browser.min.js"></script>
		<script src="https://npmcdn.com/ 
[email protected]/dist/remarkable.min.js"></script>
	</head>

	<body>
		<p>-----------------按鈕點選--------------------------------</p>
		<div id="content"></div>
		<p>-----------------陣列解析/元件巢狀--------------------------------</p>
		<div id="arraycontent"></div>
		<p>-----------------獲取真實的DOM節點--------------------------------</p>
		<div id="getDOM"></div>
		<p>-----------------獲取jsx--------------------------------</p>
		<div id="getJSX"></div>
		<p>///----------------------提交表單----------------------------</p>
		<div id="submitForm"></div>
		<script type="text/babel" src="content.js" ></script>
	</body>

</html>

//-----------------按鈕點選--------------------------------
var Clickapp=React.createClass({
	getInitialState:function () {
		// body...
		return { clickCount:0,};
	},
	handleClick:function () {
		// body...
		this.setState({
			clickCount:this.state.clickCount+1,
		});
	},
	render:function () {
		// body...
		return(<div>
				<h2>點選下面按鈕</h2>
				<button onClick={this.handleClick}>點選我</button>
				<p>一共點選了:{this.state.clickCount}</p>	
			</div>);
	}
});

ReactDOM.render(<Clickapp /> ,document.getElementById('content')); 

//<p>-----------------陣列解析/元件巢狀--------------------------------</p>
 
var data = [
  {id: 1, author: "Pete Hunt", text: "This is one comment"},
  {id: 2, author: "Jordan Walke", text: "This is *another* comment"}
];
 var ArrayText=React.createClass({
 	rawMarkup: function() {
    		var md = new Remarkable();
    		var rawMarkup = md.render(this.props.comment);
    		return { __html: rawMarkup };
  		},
	  handleAuthorOnClick: function() {
	   	alert(e.target.value);
	  },
 	render() {
 		return (
 			<div>
 				<h1 onClick={this.handleAuthorOnClick}>{this.props.author}</h1>
 				<span dangerouslySetInnerHTML={this.rawMarkup()}></span>
 			</div>
 		);
 	}
 });
var Arraycontent=React.createClass({
 	render() {
 		var ArrayNodes = this.props.data.map(function(comment) {
      		return (<div><ArrayText author={comment.author} comment={comment.text}/></div>);
      		}
      	);
 		return (<div>{ArrayNodes}</div>);
 	}
 });
ReactDOM.render(<Arraycontent data={data} /> ,document.getElementById('arraycontent')); 

///<p>-----------------獲取真實的DOM節點--------------------------------</p>

var GetDOM=React.createClass({
	getInitialState:function () {
		// body...
		return {inputText:"未選中",isCheck:false};
	},
	handleClick:function () {
		this.setState({
			isCheck:this.state.isCheck?false:true,
			inputText:!this.state.isCheck?"已選中":"未選中"
		});
	},
	render(){
		return(
				<div>	
					<input type="checkbox" checked={this.state.isCheck}></input>{this.state.inputText}

					<input type="button" value="改變選中狀態" onClick={this.handleClick}></input>
				</div>
			);
	}
});
ReactDOM.render(<GetDOM /> ,document.getElementById('getDOM')); 

///----------------------提交表單----------------------------
var Checkbox=React.createClass({
	render(){
		return (<div>
					<input onChange={this.props.handleCheckboxChange}  type="checkbox" value="A">A</input>
					<input onChange={this.props.handleCheckboxChange} type="checkbox" value="B">B</input>
					<input onChange={this.props.handleCheckboxChange} type="checkbox" value="C">C</input>
			</div>)
	}
});
var Radio=React.createClass({
	render(){
		return (<div>
					<input onChange={this.props.handleRadioChange} type="radio" name="radio" value="A">A</input>
					<input onChange={this.props.handleRadioChange} type="radio" name="radio" defaultChecked value="B">B</input>
					<input onChange={this.props.handleRadioChange} type="radio" name="radio" value="C">C</input>
				</div>)
	}
});
var SubmitForm=React.createClass({
	getInitialState:function(){
		return {
			textValue:"input value",
			selectValue:"B",
			checkboxValue:[],
			textareaValue:"input same ....",
			radioValue:"C",
		}
	},
	handleRadioChange:function(e){
		this.setState({
			radioValue:e.target.value,
		});
	},
	handleCheckboxChange:function(e){
		var checkboxArr=this.state.checkboxValue.slice();
		var newVal=e.target.value;
		var index=checkboxArr.indexOf(newVal);
		if(index==-1){
			checkboxArr.push(newVal)
		}else{
			checkboxArr.splice(index,1)
		}
		this.setState({
			checkboxValue:checkboxArr,
		});
	},
	handleSubmit:function(e){
		e.preventDefault();
		var formData={
			textValue:this.refs.inputText.getDOMNode().value,
			selectValue:this.refs.inputSelect.getDOMNode().value,
			radioValue:this.state.radioValue,
			checkboxValue:this.state.checkboxValue
		}
		console.log('the form result is:')
		console.log(formData)
		 
	},
	render(){
		return (
			<form onSubmit={this.handleSubmit}>
				文字:<input type="text" ref="inputText" defaultValue={this.state.textValue} />
				<br/>
				<br/>
				選項:<select defaultValue={this.state.selectValue} ref="inputSelect">
					<option value="A">A</option>
					<option value="B">B</option>
					<option value="C">C</option>
					<option value="D">D</option>
				</select>
				<br/>
				<br/>
				單選:
				<Radio handleRadioChange={this.handleRadioChange}/>
				<br/>
				多選:
				<Checkbox handleCheckboxChange={this.handleCheckboxChange}/>
				<br/>
				<input type="submit"></input>
			</form>
			);
	}
});
ReactDOM.render(<SubmitForm /> ,document.getElementById('submitForm'));

實現最後一個提交表單的功能時，雖然把值獲取出來，但是在給checkBox，radioBox 賦預設值時，不知如何下手，慢慢來~~明日j繼續..

///------------------------獲取網路資料----------------------------------
var UserGist=React.createClass({
    getInitialState:function(){
        return{
                username: '',
                lastGistUrl: ''
        };
    },
    componentDidMount:function(){
        $.get(this.props.source,function(result){
            var lastGist=result[0];
            if(this.isMounted()){
                this.setState({
                    username:lastGist.owner.login,
                    lastGistUrl:lastGist.html_url
                });
            }
        }.bind(this))
    },
    render:function(){
        return(
            <div>
                 {this.state.username}'s last gist is <a href={this.state.lastGistUrl}>here</a>.
            </div> 
        );
    }
});
//<p>----------獲取網路資料2----------</p>  
var RepoList=React.createClass({
    getInitialState:function(){
        return{
            loading: true,
            error: null,
            data: null
        }
    },
    //then()方法是非同步執行 就是當.then()前的方法執行完後再執行then()內部的程式 這樣就避免了，資料沒獲取到等的問題
      componentDidMount:function() {
        this.props.promise.then(
          (value) => this.setState({loading: false, data: value}))
      },

    render:function(){
        if (this.state.loading) {
            return <span>Loading...</span>;
        }else if (this.state.error !== null) {
            return <span>Error: {this.state.error.message}</span>;
        }else {
            console.log(data)
            var repos = this.state.data.items;
            var repoList = repos.map(function (repo, index) {
            return (
               <Form> <li key={index}><a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}</li></Form>
                );
            });
            return (
                <main>
                  <h1>Most Popular JavaScript Projects in Github</h1>
                  <ol>{repoList}</ol>
                </main>
              )
        }
    }
});

因為專案UI為weui，故加入

import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery'
import {ButtonArea,
    Button,
    Cells,
    CellsTitle,
    CellsTips,
    Cell,
    CellHeader,
    CellBody,
    CellFooter,
    Form,
    FormCell,
    Icon,
    Input,
    Label,
    TextArea,
    Switch,
    Radio,
    Checkbox,
    Select,
    Uploader} from 'react-weui';
import Page from '../../component/page';

比較亂...

React.js踩坑中...

公司新專案暫定技術使用React.js,先找幾個DEMO試試，其中語法與之前的語法有點點的區別，最坑爹的是沒有一個完美的IDE，作為腦子懶得人，沒有快捷聯想，我的天~~~廢話不多說直接上。。。 IDE：Sublime Text 3，更新ReactJS外掛，勉強使用。 <

react學習 | 踩坑指南

color es5 rtl https reat web .config fail package react樣式模塊化的"omit -loader"坑眾所周知 react樣式的模塊化(css modules) 是自己模塊中寫自己的css，與其他模塊互補影響，解決了命名

create-react-app踩坑記

tcs onf class working zip als mpi iconfont hat 前言哇，不的不說這個react 這個腳手架create-react-app腳確實有很多問題，哈哈，下面來看看吧有哪些坑：引用sass或者less 記得16

Next.js踩坑入門系列（七） —— 其他相關知識

Next.js踩坑入門系列 (一) Hello Next.js (二) 新增Antd && CSS (三) 目錄重構&&再談路由 (四) Next.js中期填坑 (五) 引入狀態管理Redux (六) 再次重構目錄 (七) 其他相關知識獲

react native 踩坑記

react native 碰到的幾個坑。記錄如下。 1.com.facebook.react.common.JavascriptException: undefined is not an object (evaluating 'n.internals.offset[e]'), stack:

react-native踩坑日記

1、在IOS11.3版本中scrollView下的用Text包裹的文字不顯示內容，解決方式：將文字用多個Text分開包裹。以上會出現閃退的情況，最好是將文字單獨建立HTML檔案然後將其用WebView引入。 android的HTML檔案需要放在android\app\src\main\as

React-native踩坑日記（一）

建立頁面跳轉時報錯 undefined is not an object (this.props.navigation.navigate 學習 React-native 的第一個心得就是要做好踩坑的準備，之前剛入手的時候瘋狂紅屏，於是各種百度，終於可以正常

react-navigation踩坑記錄

一、BUG記錄在專案當中引入react-navition（2.13.0），執行的時候出現了以下錯誤： TypeError: undefined is not an object (evaluating 'context.changedBits') This error

react-native 踩坑紀實（1）- 安裝環境

一、安裝環境開發rn得裝個nodejs，我機器有，這一步就免了。然後開啟rn的官網瞄了一下，官網的get start使用的是expo 來進行開發，這個東西我體會了一下就是能快速進入開發狀態。不用裝android-studio，手機裝一個Expo客戶端就直接能用，省

Vue.js 踩坑記 (四)

要開發還得選好IDE，我推薦使用 Visual Studio Code，下面看看怎麼除錯。試著除錯 node.js 的程式碼還是上篇那段 const http = require('http');const hostname = '127.0.0.1';const port

Babylon.js 踩坑——正交攝像機,平行投影的相關設定

最近在研究Babylon.js這款專業Web3D的遊戲引擎，官網的教程很全面，但不免有些遺漏的地方。今天，就講Babylon.js中相機的投影型別。 Babylon.js

react native踩坑記（建立指定的React-Native版本）

建立指定的React-Native版本剛剛開始學習React Native，很多都不懂，搭建環境的時候遇到了挺多問題的，一直在折騰。我是按照React Native文件來搭建環境的，安裝react-native-cli使用的是下面的命令。 npm in

React Native踩坑記

一、遇到過的坑 1.1 執行Downloading https://services.gradle.org/distributions/gradle-2.4-all.zip時報錯解決方法：複製報錯的下載連結，用迅雷下載，將專案地址中的AwesomeP

Log4J，在踩坑中升級版本

基本概念 Commons-logging apache最早提供的日誌的門面介面。避免和具體的日誌方案(log4j、logback等)直接耦合。類似於JDBC的api介面，具體的的JDBC driver實現由各資料庫提供商實現。JCL的思想也是想通過統一介面解耦，將日誌方案的實現與日誌介面分離。但是Apac

Android原生專案整合React Native踩坑記

最近在學習React Native，將Android原生專案整合React Native實現混合開發。參考官網和其他一些相關資料，自己動手一步一步操作，發現真的是一步步踩坑再填坑的過程，此文章記錄整合React Native的步驟和出現的問題，方便以後查閱。

vue.js踩坑記

1、報錯：Component template should contain exactly one root element. 背景：使用webpack和單檔案元件，執行npm run dev報錯

React Native 踩坑日記

一、TabBarIOS 出現react.children.only expected to receive a single react element child 問題程式碼於示圖： findP

基於React.js + ANT DESIGN 中使用非同步請求之----fetch封裝

1，閱讀宣告：關於fecth封裝基於React.js以及螞蟻金服推出的ANT DESIGN前端UI框架，語法使用ES6； 2，在專案中安裝whatwg-fetch,命令列命令-----cnpm ins

React Native踩坑之路 — 執行Android專案的各種坑坑(Windows)

之前我們已經初始化了一個Raect Native 專案，驗證了Android環境的正確性，接下來就執行起來吧！執行命令： ① react-native start ② react-native run-android 執行步驟： 1.

react-native 踩坑適用於新學者 ide:visual studio

用書《react native 跨平臺移動應用開發》（第二版）作者：闕喜濤 1.在試執行第一個程式碼時，用VS進行了程式碼編輯，輸入Dimensions時，VS自動添加了如下程式碼 import { Dimensions } from './C:/Users/HP/App

React.js踩坑中...

相關推薦