React中类似Vue的“模板语法” _React

文章插图

一、数据绑定类似 Vue 的 v-model，

this.state = {val: 1,companies: ["阿里巴巴", "腾讯", "百度", "京东"],};companyNameUpdate(e) {this.setState({companyName: e.target.value})}<input value=https://www.isolves.com/it/cxkf/bk/2020-07-23/{this.state.companyName} onChange={this.companyNameUpdate}/>

本例中，由于 React 是单向数据绑定，所以还要额外增加 onChange 函数来实时获取输入框中的值
一、遍历类似 Vue 的 v-for，通过 js 的 map 操作
【React中类似Vue的“模板语法”】<ul>{this.state.list.map((item,index)=>{return <li>{item}</li>})}</ul>三、绑定事件如使用 onClick，即点击时的事件，类似 Vue 的 @change
<button onClick={this.addCompany}>增加公司</button>四、附代码

import React, {Fragment} from "react";class ParentTest extends React.Component {constructor(props) {super(props);this.state = {companies: ["阿里巴巴", "腾讯", "百度", "京东"],companyName: ""};this.addCompany = this.addCompany.bind(this);this.companyNameUpdate = this.companyNameUpdate.bind(this)}addCompany() {this.setState({companies: [...this.state.companies, this.state.companyName],companyName: ""})}companyNameUpdate(e) {this.setState({companyName: e.target.value})}render() {return (<Fragment><input value=https://www.isolves.com/it/cxkf/bk/2020-07-23/{this.state.companyName} onChange={this.companyNameUpdate}/>{this.state.companies.map((item, index) => {return {item}
})})}}export default ParentTest;