溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

react組件的使用方法

發(fā)布時(shí)間：2020-07-30 11:23:28 來(lái)源：億速云 閱讀：129 作者：小豬 欄目：web開發(fā)

這篇文章主要講解了react組件的使用方法，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

組件間傳值：

<!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核心庫(kù)-->
<script src="../js/react-dom.production.min.js"></script><!--操作DOM的react擴(kuò)展庫(kù)-->
<script src="../js/babel.min.js"></script><!--解析JSX語(yǔ)法-->
<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}>點(diǎn)擊</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核心庫(kù)-->
<script src="../js/react-dom.production.min.js"></script><!--操作DOM的react擴(kuò)展庫(kù)-->
<script src="../js/babel.min.js"></script><!--解析JSX語(yǔ)法-->
<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);//重新設(shè)置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核心庫(kù)-->
<script src="../js/react-dom.production.min.js"></script><!--操作DOM的react擴(kuò)展庫(kù)-->
<script src="../js/babel.min.js"></script><!--解析JSX語(yǔ)法-->
<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核心庫(kù)-->
<script src="../js/react-dom.production.min.js"></script><!--操作DOM的react擴(kuò)展庫(kù)-->
<script src="../js/babel.min.js"></script><!--解析JSX語(yǔ)法-->
<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會(huì)先執(zhí)行，但不一定先執(zhí)行完畢
      console.log('之前');
      // this.get();
    }
 
    componentDidMount() {
      //進(jìn)行ajax操作，獲取后臺(tái)數(shù)據(jù)
      console.log('之后');
    }
 
    shouldComponentUpdate(nextProps, nextState) {
      const {msg} = this.state;
 
      //如果沒有
      if ({msg} !== nextState) {
        return true;
      }
      console.log('更新');
      return false;
    }
 
    componentWillUpdate() {
      console.log('更新之前');
    }
 
    componentDidUpdate() {
      console.log('更新之后');
      //再次獲取數(shù)據(jù)
    }
 
    click = ()=>{
      this.setState({
        msg: 234
      })
    };
 
    render() {
      console.log('render');
      const {msg} = this.state;
      return(
        <div>
          <h2>{msg}</h2>
          <button onClick={this.click}>更新</button>
        </div>
      )
    }
  }
 
  ReactDOM.render(<Com />,document.getElementById('app'));
</script>
</body>
</html>

看完上述內(nèi)容，是不是對(duì)react組件的使用方法有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手