【20】前端實習：react官方文檔學習（處理事件/條件渲染/ 顯示與隱藏 /列表與鍵）

【1】處理事件

*****************Tip**************************

e是一個合成事件。React根據W3C規範定義了這些合成事件，因此您無需擔心跨瀏覽器兼容性。

*****************Tip**************************

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { stat } from 'fs';

class OpenIt extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: true
    };
    this.handleClickButton = this.handleClickButton.bind(this);
  }

  handleClickButton() {
    // this.setState(
    //   {isOpen: false}//這樣寫只會從ON到OFF
    // )
    this.setState((OpenState) => ({
      isOpen: !OpenState.isOpen
    }))
  }
  
  render() {
    return (
      <div>
        <button onClick={this.handleClickButton}>{this.state.isOpen ? "ON" :"OFF"}</button>
      </div>
    );
  }
}

ReactDOM.render(
  <OpenIt />,
  document.getElementById('root')
);

serviceWorker.unregister();

【2】條件渲染

登錄與未登錄

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { stat } from 'fs';

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;

    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);

serviceWorker.unregister();

內聯使用邏輯運算符&&

您可以通過將它們包裝在花括號中來在JSX中嵌入任何表達式。這包括JavaScript邏輯&&運算符。它有條件地包括一個元素可以很方便：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

const msg = [1,2,3]

function ShowMsg(props) {
  const msg = props.msg
  return (
    <div>
      {msg.length > 0 &&
        <div>這裏有{msg.length}條消息</div>
      }
    </div>
  )
}


ReactDOM.render(
  <ShowMsg msg={msg}/>,
  document.getElementById('root')
);

serviceWorker.unregister();

它的工作原理是因爲在JavaScript中，true && expression始終求值expression，並false && expression始終求值false。

因此，如果條件是true，則後面的元素&&將出現在輸出中。如果是false，React將忽略並跳過它。

 

 

【3】顯示與隱藏

 

防止組件渲染

在極少數情況下，您可能希望組件隱藏自身，即使它是由另一個組件呈現的。要執行此操作null而不是其渲染輸出。

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

class ShowIt extends Component {
  constructor(props) {
    super(props);
    this.state = {
      iswar: true
    }
    this.handleOperateWar = this.handleOperateWar.bind(this);
  }

  handleOperateWar() {
    this.setState((WarState) => ({
      iswar: !WarState.iswar
    }))
  }

  render() {
    return (
      <div>
        <War warn={this.state.iswar}></War>
        <button onClick={this.handleOperateWar}>{this.state.iswar ? "hide" : "show"}</button>
      </div>
    )
  }
}

function War(props) {
  if(!props.warn) {
    return null
  }
  return (
    <div>
      <span>這是警告</span>
    </div>
  )
}

ReactDOM.render(
  <ShowIt />,
  document.getElementById('root')
);

serviceWorker.unregister();

【4】列表與鍵

*****************Tip**************************

*****************Tip**************************

將列表的元素依次輸出：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

// 面試題：將數組裏的元素一次輸出
const numbers = [1,2,3,4,5];
const Thelist = numbers.map((number) => <li key={number}>{number}</li>)
class ShowIt extends Component {
  constructor(props) {
    super(props);
    this.state = {
    }
}
  render() {
    return (
      <div>
        <ul>{Thelist}</ul>
      </div>
    )
  }
}
ReactDOM.render(
  <ShowIt />,
  document.getElementById('root')
);

serviceWorker.unregister();

key的作用：幫助React識別哪些項目已更改，已添加或已刪除。應爲數組內部的元素賦予鍵（key），以使元素具有穩定的標識：

將遍歷依次輸出數組元素優化爲

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

// 面試題：將數組裏的元素一次輸出
const numbers = [1,2,3,4,5];
const Thelist = numbers.map((value, index) => <li key={index}>{value}</li>)
class ShowIt extends Component {
  constructor(props) {
    super(props);
    this.state = {
    }
}
  render() {
    return (
      <div>
        <ul>{Thelist}</ul>
      </div>
    )
  }
}
ReactDOM.render(
  <ShowIt />,
  document.getElementById('root')
);

serviceWorker.unregister();

 

列表試煉

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';


const list = [
  {id: 1 , name: '張三'},
  {id: 2, name: '王五'}
]
const topbar = (
  <ul>
    {list.map((list) => 
      <li key={list.id}>{list.id}</li>
    )}
  </ul>
)

const bottombar = list.map((list) => 
    <li key={list.id}>{list.name}</li>
)

class ShowIt extends Component {
  constructor(props) {
    super(props);
    this.state = {
    }
}
  render() {
    return (
      <div>
        {topbar}
        <hr />
        {bottombar}        
      </div>
    )
  }
}
ReactDOM.render(
  <ShowIt />,
  document.getElementById('root')
);

serviceWorker.unregister();