c
c
class
Search…
⌃K

React 基本概念2

Prop

即為HTML tag中的屬性
1.新增一個元件為Proptest.js
import React, { Component } from 'react'
class Proptest extends Component {
render(){
return <div> {this.props.text}</div>
}
}
export default Proptest
TextDisplay.js
import React, { Component } from 'react'
import Proptest from './Proptest.js';
class TextDisplay extends Component {
constructor() {
super()
}
render() {
return (
<div>
<Proptest text="I am PropTest" />
</div>
)
}
}
export default TextDisplay
即可看到Proptest的props顯示出來了
2.讓子代來啟動父代的function
Proptest.js
import React, { Component } from 'react'
class Proptest extends Component {
render(){
return <button onClick={this.props.trigger} />
}
}
export default Proptest
TextDisplay.js
import React, { Component } from 'react'
import Proptest from './Proptest.js';
class TextDisplay extends Component {
constructor() {
super()
this.state = {
inputText: ' sdsxt'
}
}
handleChange(e) {
console.log('hihi')
}
render() {
return (
<div>
<Proptest trigger={() => this.handleChange()} />
</div>
)
}
}
export default TextDisplay

在元件內使用條件判斷

Proptest.js
import React, { Component } from 'react'
class Proptest extends Component {
render(){
return (
<div>
<p>點擊按鈕後我會消失</p>
</div>
)
}
}
export default Proptest
TextDisplay.js
import React, { Component } from 'react'
import Proptest from './Proptest.js';
class TextDisplay extends Component {
constructor() {
super()
this.state = {
show: true
}
}
handleChange() {
if(this.state.show) {
this.setState({show: false});
} else {
this.setState({show: true});
}
}
render() {
return (
<div>
<button onClick={() => this.handleChange()} />
{ this.state.show ? <Proptest /> : '' }
</div>
)
}
}
export default TextDisplay

使用AJAX

1.先在server.js加上app.get的路徑
var express = require('express');
var path = require('path');
var config = require('../webpack.config.js');
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var app = express();
var compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {noInfo: true, publicPath: config.output.publicPath}));
app.use(webpackHotMiddleware(compiler));
app.use(express.static('./dist'));
app.get('/hi',function(req,res){
console.log(req);
res.end("Hello Hello hi hi hi");
});
app.use('/', function (req, res) {
res.sendFile(path.resolve('client/index.html'));
});
var port = 3000;
app.listen(port, function(error) {
if (error) throw error;
console.log("Express server listening on port", port);
});
2.TextDisplay.js
import React, { Component } from 'react'
import Proptest from './Proptest.js';
import axios from 'axios';
class TextDisplay extends Component {
constructor() {
super()
this.state = {
data: ''
}
}
componentWillMount() {
axios.get('http://localhost:3000/hi')
.then((res) => {
console.log(res.data);
this.setState({data: res.data});
})
}
render() {
return (
<div>
{this.state.data}
</div>
)
}
}
export default TextDisplay

Stateless component

之前我們寫元件都是使用class寫法 React.js官方說明使用以下方式將比使用class寫法具有更好的效能
Proptest.js
import React, { Component } from 'react'
const Proptest = (props) => (
<div>{props.name}</div>
);
export default Proptest
TextDisplay.js
import React, { Component } from 'react'
import Proptest from './Proptest.js';
import axios from 'axios';
class TextDisplay extends Component {
constructor() {
super()
this.state = {
data: ''
}
}
render() {
return (
<div>
<Proptest name="HIHI,this is stateless component" />
</div>
)
}
}
export default TextDisplay
其為一個簡單的function具有參數,而在父元件寫入的同名props使用props.名字存取
但stateless component不能使用生命週期以及ref