React学习(一) 函数式编程 + JSX ——简单列表样式切换

　　1.项目目录结构

　　　　1.1 index.js ，React项目入口文件

　　　　1.2 App.js ，根组件

　　　　1.3 views 视图文件，List组件放在 views/list 下

　　

 

　　2.index.js ：

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

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

　　

　　3. App.js ：

　　　　3.1 在App.js中模拟了一组数据 data 作为参数；

　　　　3.2 引入List组件将模拟的 data 传给List 组件

import React from 'react';
import List from "./views/list/List";
var data = [
  {
    title: "家人",
    list: [
      { name: "父亲" },
      { name: "母亲" },
      { name: "姐姐" },
    ]
  },
  {
    title: "好友",
    list: [
      { name: "张三" },
      { name: "李四" },
      { name: "王五" },
    ]
  },
  {
    title: "同学",
    list: [
      { name: "123" },
      { name: "321" },
      { name: "132" },
    ]
  },
];
function App() {
  return (
    <div className="App">
        <List data={data} />
    </div>
  );
}

export default App;

　　

　　4.List.js ，列表组件： 

　　　　4.1 在List主函数中接收props作为组件通信传入的参数，解构出data；对data进行map循环（不用foreach是因为）输出<ListItem /> 组件，将data数组中的每一项传都给独立的一个 ListItem组件

import React from 'react';
import ListItem from './ListItem';
import "./css/list.css";
function List(props) {
    console.log(props);
    let { data } = props;
    return (
        <div>
            {data.map((el, index) => {
               
                if (el.title) {
                    return (<ListItem key={index} data={el} />);
                }
            })}
            <ul className="list-item"></ul>
        </div>
    );
}

export default List;

 

 　　5. ListItem.js ，列表项组件：接收到的数据结构出title和list数组，使用map方法循环出<li></li>标签对；

　　　　5.1 绑定方法，使用JSX语法对每一个<ul></ul>进行事件绑定，对点击的对象进行class(JSX中为className)的内容修改以达到更改样式的目的；

　　　　5.2 setActive方法允许多个<ul></ul>同时展开，setSingleActive只允许同一时间只展开一个；

import React from "react";
function ListItem(props) {

    let { title, list } = props.data;

    // 可以展开多个
    function setActive(e) {
        let className = e.target.className;
        let reg = (/active/g);
        if (reg.test(className)) {
            e.target.className = className.replace(reg, ' ');
        } else {
            e.target.className = className + ' active';
        }
    }
    // 只能展开一个
    function setSingleActive(e) {
        let className = e.target.className;
        let reg = (/active/g);
        if (reg.test(className)) {
            e.target.className = className.replace(reg, '');
            return;
        }
        let lists = document.querySelectorAll(`.${className}`);
        lists.forEach(el => {
            el.className = el.className.replace(reg, '');
        });
        e.target.className = className + ' active';
    }

    return (
        <ul className="list" onClick={($event) => { setActive($event) }} >
            {title}
            {list.map((el, index) => {
                return (
                    <li className="list-item" key={index}>
                        {el.name}
                    </li>
                );
            })}
        </ul>
    );
}
export default ListItem;