react 구성 요소 기본 용법 예제 소결

7801 단어 react.구성 요소
본 논문 의 사례 는 react 구성 요소 의 기본 적 인 용법 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
구성 요소 간 전송 값:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>
<div id="app">
 
</div>
<script src="../js/react.production.min.js"></script><!--react   -->
<script src="../js/react-dom.production.min.js"></script><!--  DOM react   -->
<script src="../js/babel.min.js"></script><!--  JSX  -->
<script type="text/babel">
  class Com extends React.Component {
    click = ()=>{
      // console.log(this.input);
      // console.log(this.p.innerText);
      console.log(this.refs.my.value);//         refs
    };
 
    render() {
      return (
        <div>
          <input type="text" ref={(input)=>{this.input=input}}/>
          <p ref={(p)=>{this.p=p}}>    </p>
          <input type="text" ref="my"/>
          <button onClick={this.click}>  </button>
        </div>
      );
    }
  }
 
  ReactDOM.render(<Com/>,document.getElementById('app'));
</script>
</body>
</html>
목록:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>
<div id="app"></div>
<script src="../js/react.production.min.js"></script><!--react   -->
<script src="../js/react-dom.production.min.js"></script><!--  DOM react   -->
<script src="../js/babel.min.js"></script><!--  JSX  -->
<script type="text/babel">
  class Add extends React.Component {
    click = ()=>{
      this.props.allAdd(this.input.value);
    };
    render() {
      const {length} = this.props;
      return (
        <div>
          <input type="text" ref={(input)=>{this.input=input}}/>
          <button onClick={this.click}>add{length}</button>
        </div>
      )
    }
  }
 
  class List extends React.Component {
    render() {
      const {list} = this.props;
      return (
        <div>
          <ul>
            {
              list.map((v,i)=>{
                return <li key={i}>{v}</li>
              })
            }
          </ul>
        </div>
      )
    }
  }
 
  class App extends React.Component {
    state = {
      list:['  ','  ','   ','  ']
    };
    add = (value)=>{
      const {list} = this.state;//     list
      list.unshift(value);//       list
      this.setState(list);//    list
    };
    render() {
      const {list} = this.state;//  list
      return (
        <div>
          <Add allAdd={this.add} length={list.length}/>
          <List list={list} />
        </div>
      )
    }
  }
 
  ReactDOM.render(<App />,document.getElementById('app'));
</script>
</body>
</html>
제어 모듈 과 비 제어 모듈:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>
<div id="app"></div>
<script src="../js/react.production.min.js"></script><!--react   -->
<script src="../js/react-dom.production.min.js"></script><!--  DOM react   -->
<script src="../js/babel.min.js"></script><!--  JSX  -->
<script type="text/babel">
  class Com extends React.Component {
    state = {
      age:''
    };
    //        state  
    click = () => {
      console.log(this.input.value);
    };
    change = (event)=>{
      console.log(event.target.value);
      this.setState({
        age: event.target.value
      })
    };
    render() {
      const {age} = this.props;
      return (
        <div>
            ：<input type="text" ref={(input)=>{this.input=input}}/>
          <button onClick={this.click}>    </button>
            ：<input type="text" value={age} onChange={this.change}/>
        </div>
      );
    };
  }
  ReactDOM.render(<Com />,document.getElementById('app'));
</script>
</body>
</html>
구성 요소 수명 주기:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
</head>
<body>
<div id="app"></div>
<script src="../js/react.production.min.js"></script><!--react   -->
<script src="../js/react-dom.production.min.js"></script><!--  DOM react   -->
<script src="../js/babel.min.js"></script><!--  JSX  -->
<script type="text/babel">
  class Com extends React.Component {
    state = {
      msg:123
    };
 
    sing() {
      return new Promise((resolve,reject)=>{
        setTimeout(()=>{
          resolve('    ');
        },1000);
      })
    };
 
    async get() {
      await this.sing().then((res)=>{
        console.log(res);
      });
    };
 
    componentWillMount() {
      //will    ，         
      console.log('  ');
      // this.get();
    }
 
    componentDidMount() {
      //  ajax  ，      
      console.log('  ');
    }
 
    shouldComponentUpdate(nextProps, nextState) {
      const {msg} = this.state;
 
      //    
      if ({msg} !== nextState) {
        return true;
      }
      console.log('  ');
      return false;
    }
 
    componentWillUpdate() {
      console.log('    ');
    }
 
    componentDidUpdate() {
      console.log('    ');
      //      
    }
 
    click = ()=>{
      this.setState({
        msg: 234
      })
    };
 
    render() {
      console.log('render');
      const {msg} = this.state;
      return(
        <div>
          <h1>{msg}</h1>
          <button onClick={this.click}>  </button>
        </div>
      )
    }
  }
 
  ReactDOM.render(<Com />,document.getElementById('app'));
</script>
</body>
</html>
본 고 에서 말 한 것 이 여러분 의 react 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
자바 는 Jetty 9 에서 HttpSession Listener 와 Filter 를 사용 합 니 다.
자바 HttpURLConnection 파일 과 문자열 정보 보 내기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage