基础结构
import React,{Component,Fragment} from 'react' // 导入各种依赖及组件
class Demo extends Component{
render(){
return (// jsx代码---js代码与html代码
<Fragment>
<h1>123</h1>
</Fragment>
);
}
}
export default Demo //导出Demo组件
state数据的操作
import React, { Component,Fragment } from 'react';
import logo from './logo.svg';
import './App.css'
// 组件App继承自Component
class App extends Component {
constructor(props){
super(props);
// 这里是state数据
this.state={
inputValue : 'demo',
list : []
}
}
render() {
return (
<Fragment>
{/**注释写法,该注释只在编码时可以看到 */}
{/**bind(this),改变this指向 */}
{/**使用className代替class的原因是class与react的class类创建名重复说以在react中使用className代替class */}
<input value={this.state.inputValue} onChange={this.thisChange.bind(this)} className='input'></input>
<button onClick={this.inputButton.bind(this)}>提交</button>
<ul>
{/** 改变this指向并传入一个index值 */}
{
this.state.list.map((item,index)=>{
return (
<li key={index} onClick={this.deleteli.bind(this,index)}>
{item}
</li>
)
})
}
</ul>
</Fragment>
);
}
thisChange(e){
this.setState({
inputValue : e.target.value
});
}
inputButton(){
this.setState({
list : [...this.state.list,this.state.inputValue],
inputValue : ''
});
}
deleteli(index){
const list = [...this.state.list];
list.splice(index,1);
this.setState({
list : list
});
}
}
export default App; //导出组件App
在react中书写javascript代码需要使用“{}”进行包裹,React遵循es6
React中的父组件调用子组件及传值
父组件
import React,{Component,Fragment} from 'react'
import './App.css'
import Items from './Items' //导入Items组件
class Demo extends Component{
constructor(props){
super(props);
this.state={
inputValue : '',
list : []
};
}
render(){
return (
// 当一个组件的state或props发生改变的时候,render函数就会重新执行
/**页面随着数据的更新而更新 */
/**每当state中的数据发生改变时,render都和重新的执行一次 */
/**测试代码,在console打印render */
<Fragment>
{console.log("render")}
<input value={this.state.inputValue} onChange={this.inputChnage.bind(this)}></input>
<button onClick={this.inputValue.bind(this)}>提交</button>
<ul>
{
this.state.list.map((items,index)=>{
return (
<li onClick={this.delValue.bind(this,index)}>
{/**使用子组件 */}
<Fragment>
{/**con、index、del用于传值给子组件 */}
<Items con={items}
index={index}
{/**在传递函数给子组件调用时,需要把组件Items的this指向改为本页面的this */}
del={this.delValue.bind(this)}>
</Items>
</Fragment>
</li>
);
})
}
</ul>
{/**使用test子组件 */}
<Test test={this.state.inputValue}></Test>
</Fragment>
);
}
inputChnage(e){
const value = e.target.value;
this.setState(()=>({
inputValue : value
}));
}
inputValue(){
this.setState({
list : [...this.state.list,this.state.inputValue],
inputValue : ''
});
}
delValue(index){
const list = [...this.state.list];
list.splice(index,1);
this.setState({
list : list
});
}
}
export default Demo
子组件
import React,{Component,Fragment} from 'react'
import propTypes from 'prop-types'
class Items extends Component{
// this.props.属性名-----可用于获取由父组件传递来的属性值
constructor(props){
super(props);
this.deleteValue = this.deleteValue.bind(this) //把this指向改为指向本函数的this指向,所以在deletevalue中才能用this调用props
}
render(){
const { con } = this.props;
return (
<Fragment>
{/**props用于获取属性,con是从demo,js传过来的属性 */}
<li onClick={this.deleteValue}>{con}</li>
</Fragment>
);
}
deleteValue(){
const {index} = this.props;
const {del} = this.props;
}
}
export default Items