范天缘的博客

原因:onClick事件如果包含() ，就会变成执行函数，页面加载后会自动执行， 从而导致这个结果class IndexPage extends React.Component { render(){ return <h1 onClick={alert(111)}>hello</h1> }}换成class IndexPage extends React.Component { render(){ return <h1 onCl

解决方法1class App extends Component换成class App extends Component<any, any>缺点 失去对类型的检测，ts就没有意义了，不太建议使用

在写react+ts项目时候 vs报这个错误 constructor(props){ super(props); this.state = store.getState(); }换成 constructor(props:any){ super(props); this.state = store.getState(); }

1.npm install -g create-react-app// 如果很久之前安装过，建议卸载重新安装 npm uninstall -g create-react-app2.npx create-react-app my-app --template typescript// 这样创建出来的项目就是基于TS的3. cd my-app4. yarn startnpm install -g create-react-appnpx create-react-app my-app --templ

对hooks还不是太熟 记录一下 如有错误 还往指正react分为函数组件和类组件 函数组件只能展示 有了hooks以后 函数组件也可以做交互了1.usestate(状态)function App() { const [num, setNum] = useState(0) return ( <div className='App'> <p>{num}</p> <button onClick={()

1.标签式跳转import { Link } from 'react-router-dom'<Link t0="/About"></Link>2.编程式跳转<div onClick={ () => this.props.history.push("/About")}>跳转示例</div>

把路由文件的默认页面放在最下面就可以解决问题了 <Router> <div className="App"> <Switch> <Route path="/About" component={About}></Route> <R

首先我们下载依赖npm install react-router-dom -S// 或者yarn add react-router-dom 在src/app.js 代码如下import React,{ Component } from 'react'import { BrowserRouter as Router,Route,Switch,withRouter } from 'react-router-dom'import Home from './Home'import About

首先我们模拟一下后台传过来的数据,这里为了让代码清晰，数据就简单的模拟了一下 import bg3 from './image/bg3.png' constructor(props){ super(props) this.state = { ///这里 list:[ { id:1,img:bg3}, { id:2,img:bg3}, { id:3,img:bg3},