将一个元素数组渲染进 DOM
摘要：index.js import React, { Component } from 'react' import ReactDOM from 'react-dom' class Bar extends Component { constructor() { super() this.state =
阅读全文
posted @ 2021-09-10 10:16
随笔分类 - React
将一个函数作为 props 传递给子组件
摘要：index.js import React from 'react' import ReactDOM from 'react-dom' const UserNameInput = ({ getName }) => { return ( <input onInput={function (e) { g
阅读全文
posted @ 2021-09-10 10:15
将一个 React 元素渲染进 DOM
摘要：index.js import React from 'react' import ReactDOM from 'react-dom' const element = <h1>hello</h1> // 这是一个 React 元素 ReactDOM.render(element, document.
阅读全文
posted @ 2021-09-10 10:14
将根组件挂载到 DOM 节点上
摘要：App.jsx import React from 'react' class App extends React.Component { render() { return <h3>Hello</h3> } } export default App index.js import React fr
阅读全文
posted @ 2021-09-10 10:09
React 将 state 传给子组件用
摘要：index.js import React from 'react' import ReactDOM from 'react-dom' function Name({ name }) { return <span style={{ color: 'tomato' }}>{name}</span> }
阅读全文
posted @ 2021-09-10 10:07
React 固定事件监听函数的 this 指向
摘要：事件监听函数内部使用 this 会报错，原因是 this 的指向变成了事件触发对应的 DOM 节点，因此需要固定 this，方法有三种： index.js import React from 'react' import ReactDOM from 'react-dom' class Counter
阅读全文
posted @ 2021-09-10 09:41
React 更新一个已渲染的元素
摘要：index.js import React from 'react' import ReactDOM from 'react-dom' function render() { const element = <h1>{new Date().toLocaleTimeString()}</h1> Rea
阅读全文
posted @ 2021-09-10 09:39
React 更新 state
摘要：index.js import React from 'react' import ReactDOM from 'react-dom' class Clock extends React.Component { constructor() { super() this.state = { time:
阅读全文
posted @ 2021-09-10 09:38
React 给事件监听函数添加参数
摘要：index.js import React, { Component } from 'react' import ReactDOM from 'react-dom' class App extends Component { clickHandler = name => { alert(name)
阅读全文
posted @ 2021-09-10 09:37
React 创建一个类组件
摘要：index.js import React from "react"; class App extends React.Component { render() { return <h1>Hello, World!</h1>; } }
阅读全文
posted @ 2021-09-09 10:35
创建 React 项目
摘要：yarn yarn create react-app my-app
阅读全文
posted @ 2021-09-09 10:33
React 避免 setState 的合并调用特性
摘要：index.js import React from 'react' import ReactDOM from 'react-dom' class ANumber extends React.Component { constructor() { super() this.state = { num
阅读全文
posted @ 2021-09-09 10:23
React 绑定事件监听函数
摘要：index.js import React from 'react' import ReactDOM from 'react-dom' class Btn extends React.Component { render() { return <button onClick={() => alert
阅读全文
posted @ 2021-09-09 10:22
