前端react程序学习
1.组件:函数组件、class组件、渲染组件
函数组件示例: function Welcome(props) { return <h1>Hello, {props.name}</h1>; } export default ()=><Welcome name="test"/> class组件示例: class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } export default ()=><Welcome name="test"/> 渲染组件示例: function Welcome(props) { return <h1>Hello, {props.name}</h1>; } const element = <Welcome name="Sara" />; export default ()=>element
2.props和state
//外部传入的参数用props,内部传参用state function WarningBanner(props) { if (!props.warn) { return null; } return ( <div className="warning"> 警告! </div> ); } class Page extends React.Component { constructor(props) { super(props); this.state = {showWarning: true} this.handleToggleClick = this.handleToggleClick.bind(this); } handleToggleClick() { this.setState(prevState => ({ showWarning: !prevState.showWarning })); } render() { return ( <div> <WarningBanner warn={this.state.showWarning} /> <button onClick={this.handleToggleClick}> {this.state.showWarning ? '隐藏' : '显示'} </button> </div> ); } } export default Page
3.事件处理
示例1: function Form() { function handleSubmit(e) { e.preventDefault(); console.log('You clicked submit.'); } return ( <form onSubmit={handleSubmit}> <button type="submit">Submit</button> </form> ); } export default Form 示例2:向事件处理程序传递参数 class Popper extends React.Component{ constructor(){ super(); this.state = {name:'Hello world!'}; } preventPop(name, e){ //事件对象e要放在最后 e.preventDefault(); alert(name); } render(){ return ( <div> <p>hello</p> {/* 通过 bind() 方法传递参数。 */} <a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a> </div> ); } } export default Popper
4.条件渲染
//示例: function UserGreeting(props) { return <h1>Welcome back!</h1>; } function GuestGreeting(props) { return <h1>Please sign up.</h1>; } function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return <UserGreeting />; } return <GuestGreeting />; } export default ()=><Greeting isLoggedIn={false}/>
5.列表
//示例: function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => <li key={number.toString()}> {number} </li> ); return ( <ul>{listItems}</ul> ); } const numbers = [1, 2, 3, 4, 5]; export default ()=><NumberList numbers={numbers}/>
react相关网站:
官网:https://zh-hans.reactjs.org/docs/getting-started.html
https://www.runoob.com/react/react-install.html