13.JSX中函数的拆分 - yiqunkeke/react-jianshu-shangguigu-zty GitHub Wiki

当JSX表达式中，既包含着标签，又包含着大量的逻辑时，可以把逻辑部分，拆分成单独的函数。让JSX看起来更精简。

拆分之前的JSX

import React, { Component, Fragment } from "react";
import TodoItem from "./TodoItem";
import "./style.css";

class TodoList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: "",
      list: [],
    };
  }
  render() {
    return (
      <Fragment>
        {/*这里是标签部分*/}
        <div>
          <label htmlFor="insertArea">输入内容</label>
          <input
            value={this.state.inputValue}
            onChange={(e) => this.handleInputChange(e)}
            className="input"
            id="insertArea"
          />
          <button onClick={this.handleBtnClick}>提交</button>
        </div>
        <ul>
          { 
             // 这里是逻辑部分。可以将逻辑部分单独拆分成一个函数。
             this.state.list.map((item, index) => {
               return (
                 <TodoItem
                   key={index}
                   item={item}
                   index={index}
                   handleItemDelete={this.handleItemDelete}
                 />
               );
             })
          }
        </ul>
      </Fragment>
    );
  }

  handleInputChange = (e) => {
    this.setState({
      inputValue: e.target.value,
    });
  };

  handleBtnClick = () => {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: "",
    });
  };

  handleItemDelete = (index) => {
    const list = [...this.state.list];
    list.splice(index, 1);
    this.setState({
      list,
    });
  };
 
}

export default TodoList;

拆分之后

import React, { Component, Fragment } from "react";
import TodoItem from "./TodoItem";
import "./style.css";

class TodoList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: "",
      list: [],
    };
  }
  render() {
    return (
      <Fragment>
        <div>
          <label htmlFor="insertArea">输入内容</label>
          <input
            value={this.state.inputValue}
            onChange={(e) => this.handleInputChange(e)}
            className="input"
            id="insertArea"
          />
          <button onClick={this.handleBtnClick}>提交</button>
        </div>
        <ul>
          { this.getTodoItem() }
        </ul>
      </Fragment>
    );
  }

  handleInputChange = (e) => {
    this.setState({
      inputValue: e.target.value,
    });
  };

  handleBtnClick = () => {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: "",
    });
  };

  handleItemDelete = (index) => {
    const list = [...this.state.list];
    list.splice(index, 1);
    this.setState({
      list,
    });
  };
  
  // 将JSX中的逻辑，单独拆分出来一个函数。用于获取todoItem子组件。
  // 使得上面render函数中返回的JSX表达式看上去更精简。
  getTodoItem = () => {
     return this.state.list.map((item, index) => {
      return (
        <TodoItem
          key={index}
          item={item}
          index={index}
          handleItemDelete={this.handleItemDelete}
        />
      );
    })
  };
}

export default TodoList;
⚠️ **GitHub.com Fallback** ⚠️