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

Question

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 语句为真则 active = true）它不会重新渲染组件并且 active 将始终为 false .但是循环内的 setState 会进行大量重新渲染并抛出深度超出错误。关于如何执行此操作的任何想法？

Answer 1

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

但在这个用例中，匹配一个路由将作为 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>
    );
}

}

Answer 2

刚刚我复制了你的渲染方法，改变了这里的概念。只是我检查了 render 方法中的 activeStatus 并传递了它。对于任何状态更改，渲染都将被调用，届时它将重新制作 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>
            );
        }

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

How to pass props to styled component inside a loop

javascript

reactjs

styled-components