这里是上面内容的摘录:
慕课网的react
内容摘记
基础样式
class Hello extends React.Component{
render(){
return (
<div>Hello World</div>
);
}
}
ReactDOM.render(<Hello />,document.getElementById("root"));
<div class='root'></div>
class设置
class Hello extends React.Component{
render(){
return (
<div className='className'>Hello World</div><br>
);
}
}
ReactDOM.render(<Hello />,document.getElementById("root"));
- class在React中是关键字,所以使用className进行代替
- 这里的重点在于让你知道设置
class
不是直接写class=''
这样的形式的,而是className=''
这样的形式 - 或者你也可以直接在外部传递
className
的值:
class Hello extends React.Component{
render(){
return (
<div className={this.props.className}>Hello World</div><br>
);
}
}
ReactDOM.render(
<Hello className='the_real_class_name'/>,
document.getElementById("root")
);
style设置
使用css结合class进行样式设计
就是在外部设置css
样式,然后通过class
定位到对应的渲染结果上去。
内联样式:style
class Hello extends React.Component{
render(){
return (
<div style={{color:'red',fontSize:'24px'}}>Hello World</div>
);
}
}
ReactDOM.render(<Hello />,document.getElementById("root"));
跟class类似,style也同样不能直接设置对应属性,而是需要设置一个成一个对象,或许下面的形式你可能更好理解:
class Hello extends React.Component{
render(){
const styleName={
color:'red',
fontSize:'24px'
};
return (
<div style={styleName}>Hello World</div>
);
}
}
ReactDOM.render(<Hello />,document.getElementById("root"));
生命周期
- mount
- update
- unmount
其中各个部分中包含的函数有:
- componentWillMount
- componentDidMount
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- componentDidUpdate
- componentWillUnmount
事件绑定
class Hello extends React.Component{
handleClick(){
alert("按钮被点击");
}
render(){
return (
<button onClick={this.handleClick}>Hello World</button>
);
}
}
ReactDOM.render(<Hello />,document.getElementById("root"));
或者你也可以传递进event
参数,该参数可以像javascript
的原生event
一样操作,如下面这个例子:
class Hello extends React.Component{
handleClick(event){
alert("被点击按钮的name是:"+event.target.name);
}
render(){
return (
<div>
<button name='我是name属性1' onClick={this.handleClick}>Hello World</button>
<button name='我是name属性2' onClick={this.handleClick}>Hello World Again</button>
</div>
);
}
}
ReactDOM.render(<Hello />,document.getElementById("root"));
event是作为默认参数传递进处理事件的,不需要在外部显式调用!
这里穿插一个知识点,那就是如何获取DOM
节点本身,这里我们都是在操作渲染的模板,但是我们没有直接操作渲染完成后的DOM
对象,这里讲一下:
class Hello extends React.Component{
handleClick(event){
var Real_DOM=React.findDOMNode(this.refs.anyName);
if(Real_DOM.style.display==='none'){
Real_DOM.style.display='inline';
}else{
Real_DOM.style.display='none';
}
alert("被点击按钮的name是:"+event.target.name);
}
render(){
return (
<div>
<button name='我是name属性1' onClick={this.handleClick}>Hello World</button>
<span ref='anyName'>显示|隐藏</span>
<button name='我是name属性2' onClick={this.handleClick}>Hello World Again</button>
</div>
);
}
}
ReactDOM.render(<Hello />,document.getElementById("root"));
不知道为什么,代码语法没有报错,但是功能没有实现???