如何将道具传递给循环内的样式化组件答案

【问题标题】：How to pass props to styled component inside a loop如何将道具传递给循环内的样式化组件
【发布时间】：2020-04-10 20:25:53
【问题描述】：

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Container } from './styles';

import { MdContentCopy, MdGroup, MdPerson, MdMovie, MdSettings } from 'react-icons/md';

const items = [
    {
        route: '/',
        icon: <MdContentCopy />,
        title: 'Orders',
    },
    {
        route: '/customers',
        icon: <MdGroup />,
        title: 'Customers',
    },
    {
        route: '/movies',
        icon: <MdMovie />,
        title: 'Movies',
    },
    {
        route: '/settings',
        icon: <MdSettings />,
        title: 'Settings',
    },
    {
        route: '/Profile',
        icon: <MdPerson />,
        title: 'Profile',
    },
];

class ItemList extends Component {
    state = {
        active: false,
    };
    render() {
        const { open, history } = this.props;
        const pathName = history.location.pathname;

        return (
            <Container open={open} active={this.state.active}> // PASSING ACTIVE PROPS TO STYLED COMPONENT
                {items.map((item, index) => {
                    if (item.route === pathName) this.setState({ active: true }); // THIS THROWS AN ERROR BECAUSE TOO MANY RE-RENDERS
                    return (
                        <Link to={item.route} key={index}>
                            {item.icon}
                            <span>{item.title}</span>
                        </Link>
                    );
                })}
            </Container>
        );
    }
}

export default ItemList;

我正在尝试将活动道具传递给循环内的样式化组件（容器）。我尝试使用 setState 来触发重新渲染，因为如果我只是分配一个变量（让 active = false 并且如果 if 语句为 true 则 active = true）它不会重新渲染组件并且 active 将始终为 false .但是循环内的 setState 会进行大量的重新渲染并引发深度超出错误。关于如何做到这一点的任何想法？

【问题讨论】：

您如何确定容器是否处于活动状态？是什么设置了这种状态？正如您所发现的那样，您显然不能在渲染中setState。
这一行： if (item.route === pathName) this.setState({ active: true });确定 active 是 true 还是 false。如果 item.route 与 pathName 匹配，则 active 应该为 true。
我认为订阅 onhashchange 或 onpopstate 类型的事件并在这些事件处理程序中设置您的状态是更好的主意。
你能给我看一些Eldar的例子吗？
让我困惑的部分是ItemList 将被激活还是Link 组件本身？

标签： javascript reactjs styled-components

【解决方案1】：

在这个用例中不需要设置状态（使用 item.route === pathName 而不是 this.state.active），只需将活动值作为 true 或 false 传递给组件，这里是下面提到的修改类。

但在这个用例中，匹配一个路由将作为 active=true 传递给容器。

class ItemList extends Component {
render() {
    const { open, history } = this.props;
    const pathName = history.location.pathname;

    const isActive = items.filter(item => item.route === pathName).length > 0;

    return (
        <Container open={open} active={isActive}> // PASSING ACTIVE PROPS TO STYLED COMPONENT
            {items.map((item, index) => {
                return (
                    <Link to={item.route} key={index}>
                        {item.icon}
                        <span>{item.title}</span>
                    </Link>
                );
            })}
        </Container>
    );
}

}

【讨论】：

在这种情况下 Item 不会被定义，因为它只存在于循环中。
是的，item.route === pathName 应该替换为 items.filter(item => item.route === pathName).length > 0

【解决方案2】：

我只是复制了你的渲染方法，在这里改变了概念。只是我已经检查了渲染方法中的 activeStatus 并通过了它。对于任何状态变化，render 都会被调用，届时它将重新生成 activeStatus。

    render() {
    const { open, history } = this.props;
    const pathName = history.location.pathname;

    //code here to check the pathName
    let activeStatus = (items.filter(item => item.route == pathName) || []).length > 0 ? true : false;

    return (
      <Container open= { open } active = { activeStatus } > 
        {
          items.map((item, index) => {
            return (
              <Link to= { item.route } key = { index } >
                { item.icon }
                < span > { item.title } < /span>
                < /Link>
                        );
        })
  }
                </Container>
            );
        }

【讨论】：