以下是 React 学习的一些笔记,基本来源于 React 中文文档[1] ,刚开始学习 React,都比较基础,不喜勿碰!
const element = <img src="{user.avatarUrl}"></img>; // 错误
const element = <img src={user.avatarUrl}></img>; // 正确
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
// 函数方式
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// ES6 的 class
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
// 自定义组件,注意这里的 props,就是传入的属性对象集合
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
// Correct
this.setState((state, props) => ({
counter: state.counter + props.increment
}));
<button onclick="activateLasers()">
Activate Lasers
</button>
<button onClick={activateLasers}>
Activate Lasers
</button>
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
欢迎大家来我杂货铺逛逛,不买账都行,我们就聊聊天,谈谈心~
欢迎大家关注我的前端大杂货铺
[1]
React 中文文档: https://zh-hans.reactjs.org/docs/getting-started.html