如果组件中想用变量传进数值来表示呢
我们缺少了一个super（）函数
我们通过取父级的props指针，通过super函数传递，来指定当前的状态值，在调用的时候需要调用this.state.name来获取相应的变量值
那么如何让改变状态值呢。手动更改当然可以，但是明显的不可取，这里我们用setstate方法进行更改
这里的setState方法是从React.Component方法中继承过来的，可以更改状态对象的值
接下来我想实现通过按钮来增加上面的相应的岁数
这是因为this指针的指向不明确，按钮的this方法中传递的this.state并找不到相应的state值，也就是说相应的this指针指向不明确，
如果我们需要引用当前的state值，我们需要在声明当前的状态值的时候，绑定this指针的指向
然而我们每写一个事件就需要绑定一次this，这样的写法其实是繁琐的，
我们可以通过下面的写法即箭头函数来修订作用域
完整JSX
import React from "react";
import ReactDOM from "react-dom";
// import ReactSwiper from 'reactjs-swiper';
import "./index.scss"
class ES6Component extends React.Component{
constructor(props){
super(props)
this.state={
name:"wangpenglu",
age:12
}
// this.handleClick=this.handleClick.bind(this)
}
handleClick(){
this.setState({
age:this.state.age+1
})
}
render(){
return(
<div>
<h1>我叫{this.state.name},我今年{this.state.age}岁了</h1>
<button onClick={(e) =>{this.handleClick(e)}}>加一岁</button>
</div>
);
}
}
ReactDOM.render(
/*组件的返回方法*/
<div>
<ES6Component/>
</div>,
document.getElementById("app")
);
同时如果我们需要一个输入框来实现状态值的改变
代码之间的组件套用
完整的JSX
import React from "react";
import ReactDOM from "react-dom";
// import ReactSwiper from 'reactjs-swiper';
import "./index.scss"
class ES6Component extends React.Component{
constructor(props){
super(props)
this.state={
name:"wangpenglu",
age:12
}
// this.handleClick=this.handleClick.bind(this)
}
handleClick(){
this.setState({
age: this.state.age+1
})
};
handleOnChange(e){
this.setState({
age: e.target.value
})
}
render(){
return(
<div>
<h1>我叫{this.state.name},我今年{this.state.age}岁了</h1>
<button onClick={(e) =>{this.handleClick(e)}}>加一岁</button>
<input type="text" onChange={(e) =>{this.handleOnChange(e)}} />
</div>
);
}
}
class App extends React.Component{
render(){
return(
<div>
{/*容器组件的套用*/}
<Title>
<span>111</span>
<a>123</a>
</Title>
<hr/>
{/*单纯组件的套用*/}
<ES6Component/>
</div>
)
}
}
class Title extends React.Component{
constructor(props){
super(props)
}
render(props){
return(
<h1>{this.props.children}</h1>
)
}
}
ReactDOM.render(
/*组件的返回方法*/
<div>
<App/>
</div>,
document.getElementById("app")
);
// let ReactSwiperExample = () => {
// const items = [{
// image: 'http://i0.cy.com/xtl/pic/2020/01/14/main.jpg',
// title: '图片1',
// link: 'http://jd.com'
// }, {
// image: 'http://i0.cy.com/xtl/pic/2020/02/02/main_a1.jpg',
// title: '图片2',
// }, {
// image: 'http://i0.cy.com/xtl/pic/2020/01/14/main.jpg',
// title: '图片3',
// link: 'http://jd.com'
// }, {
// image: 'http://i0.cy.com/xtl/pic/2020/02/02/main_a1.jpg',
// title: '图片4',
// }];
// const swiperOptions = {
// preloadImages: true,
// autoplay: 4000,
// autoplayDisableOnInteraction: false
// };
// return (
// <ReactSwiper swiperOptions={swiperOptions} showPagination items={items}
// className="swiper-example" />
// );
// };
// ReactDOM.render(
// <ReactSwiperExample />, document.getElementById('app')
// );
// let jsx = <div className="jsx" >jsx......</div>
// ReactDOM.render(
// jsx,
// document.getElementById("app")
// );
怎末通过子组件改变父组件的状态值
子元素改变父元素用props,父元素设置当前的状态，在Father组件中设置颜色后传到子组件中
并传送一个callback函数进行数据的回调，在子组件中使用this.props向父级传送参数，实现数据更换
完整的jsx
import React from "react";
import ReactDOM from "react-dom";
// import ReactSwiper from 'reactjs-swiper';
import "./index.scss"
class Child extends React.Component{
constructor(props){
super(props)
}
handleClick(){
this.props.changeColor("#333")
};
render(){
return(
<div>
<h1>父组件的背景色: {this.props.bgColor}</h1>
<button onClick={(e) =>{this.handleClick(e)}}>改变父组件的背景颜色</button>
</div>
);
}
}
class Father extends React.Component{
constructor(props){
super(props);
this.state={
bgColor:"#399"
}
}
callback(color){
this.setState({
bgColor:color
})
}
render(props){
return(
<div style={{background:this.state.bgColor}}>
<Child bgColor={this.state.bgColorbgColor} changeColor={(color) =>{this.callback(color)}}/>
</div>
)
}
}
ReactDOM.render(
/*组件的返回方法*/
<div>
<Father/>
</div>,
document.getElementById("app")
);
// let ReactSwiperExample = () => {
// const items = [{
// image: 'http://i0.cy.com/xtl/pic/2020/01/14/main.jpg',
// title: '图片1',
// link: 'http://jd.com'
// }, {
// image: 'http://i0.cy.com/xtl/pic/2020/02/02/main_a1.jpg',
// title: '图片2',
// }, {
// image: 'http://i0.cy.com/xtl/pic/2020/01/14/main.jpg',
// title: '图片3',
// link: 'http://jd.com'
// }, {
// image: 'http://i0.cy.com/xtl/pic/2020/02/02/main_a1.jpg',
// title: '图片4',
// }];
// const swiperOptions = {
// preloadImages: true,
// autoplay: 4000,
// autoplayDisableOnInteraction: false
// };
// return (
// <ReactSwiper swiperOptions={swiperOptions} showPagination items={items}
// className="swiper-example" />
// );
// };
// ReactDOM.render(
// <ReactSwiperExample />, document.getElementById('app')
// );
// let jsx = <div className="jsx" >jsx......</div>
// ReactDOM.render(
// jsx,
// document.getElementById("app")
// );
如果想要兄弟之间传值
他们是兄弟关系
