331-react数据传递

react数据传递






react数据传递
1.state
2.props
3.context





一.构造函数
constructor(){
	super();
	this.abc=100;
}


<div>
	{this.abc}
</div>





二.state
constructor(){
	super();
	this.state={
		a:100
	}
}

add(){
	this.setState({a:this.state.a+1});
}

<h1>{this.state.a}</h1>
<input type="button" value="按钮" onClick={(this.add).bind(this)} />









我们来看下完整代码

import React, {Component} from 'react';
import './App.css';

class App extends Component {

  constructor() {
    super();
    this.state = {
      a: 100,
      b: 100,
      c: 100
    }
  }

  add() {
    this.setState({
      a: this.state.a + 1,
      b: this.state.b + 2,
      c: this.state.c + 3
    })
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">

          <h1>{this.state.a}</h1>
          <h1>{this.state.b}</h1>
          <h1>{this.state.c}</h1>
          <input type="button" value="按钮" onClick={(this.add).bind(this)}/>

        </header>
        <footer className="App-header">

        </footer>
      </div>
    );

  }
  
}

export default App;










三.props
我们来一个自定义组件
import React, {Component} from 'react';

class Hello extends Component {

  constructor() {
    super();
  }

  render() {
    return (
      <div>
        <p>hello world</p>
        <p>{this.props.v}</p>
      </div>
    );
  }

}

export default Hello;



然后

  render() {
    return (
      <div className="App">
        <header className="App-header">

          <Hello v={10}></Hello>
          <Hello v={20}></Hello>
          <Hello v={30}></Hello>

        </header>
        <footer className="App-header">

        </footer>
      </div>
    );





这样的话
子组件中就可以使用传递过来的props