【20】前端实习：react官方文档学习（处理事件/条件渲染/ 显示与隐藏 /列表与键）

最新推荐文章于 2022-10-28 11:55:06 发布

BBbila

最新推荐文章于 2022-10-28 11:55:06 发布

阅读量162

点赞数

分类专栏： react 文章标签： react 条件渲染列表与键显示与隐藏

本文链接：https://blog.csdn.net/qq_40610760/article/details/100100571

版权

react 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

【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**************************

将列表的元素依次输出：

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();