Question

我试图创建一个按钮来更改Click上的组件（Card.js）的css，但由于必须对Tab使用地图功能，因此无法执行操作。

那是代码。

Card.js组件：

const Cardbox = styled.div`
...
`

const Cards = styled.div`
    width: 150px;
    height: 220px;
    background: url(${props => props.bg}) no-repeat top center;
`

const Name = styled.h3`
...
`

const Role = styled.p`
...
`

const Card = props => (
  <Link to={props.link}>
    <Cardbox>
      <Cards bg={require(`./../images/Cards/${props.title}_Card.jpg`)}/>
      <div>
        <Name>{props.title}</Name>
        <Role>{props.text}</Role>
      </div>
    </Cardbox>
  </Link>
)

export default Card

Tab.js组件（我从一个恒定文件中获取数据）：

    class Tabs extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                ...
            }
        }
        ...
        makeHeroCard = (hero, index) => (
            <Card
                title={hero.name}
                text={hero.type.join(', ')}
                image={
                    require(`./../images/Cards/${hero.name}_Card.jpg`)
                }
                link={hero.name}
                key={index}
            />
        )

        render() {
            ...
            return (
                <div>
                    <button>Click here and change css</button>
                    <AppBar>
                        <Tabs>
                            <Tab label="Item One"/>
                            <Tab label="Item Two"/>
                            <Tab label="Item Three"/>
                        </Tabs>
                    </AppBar>
                    {value === 0 && (
                        <TabContainer>
                            <div className="GroupScroll">
                                <div className="Group">
                                    {heroCards.map((hero, index) => this.makeHeroCard(hero, index))}
                                </div>
                            </div>
                        </TabContainer>
                    )}
                    {value === 1 && (
                        <TabContainer>
                            <div className="GroupScroll">
                                <div className="Group">
                                    {heroCards
                                        .filter(hero => hero.type.includes('TANK'))
                                        .map((hero, index) => this.makeHeroCard(hero, index))
                                    }
                                </div>
                            </div>
                        </TabContainer>
                    )}
                </div>
            )
        }
    }

    export default Tabs

点击按钮我想做的是： 1.更改img的width，height和src； 2.隐藏h1和p。

如何使用{heroCards.map(...)}来做到这一点？

谢谢。

Answer 1

地图变化不大，不清楚要更改哪张卡，但就像为卡提供新道具一样简单。

    const Card = props => (
        <Link to={props.link}>
            <Cardbox>
                <Cards bg={require(`./../images/Cards/${props.title}_Card.jpg`)}/>
                {!props.hideNameAndRole && (
                <div>
                    <Name>{props.title}</Name>
                    <Role>{props.text}</Role>
                </div>
                )}
            </Cardbox>
        </Link>
     )

此外，请尝试避免在渲染过程中动态要求：（受此question的启发）

    function importAll(r) {
        const heroCards = {};
        r.keys().map((item, index) => { 

          const key = item.replace(
              /\.\/\.\.\/images\/Cards\/(.+)_Card\.jpg/,
              '$1'
          );

          heroCards[key] = r(item);
        });
        return heroCards;
    }

    const heroCards = importAll(
        require.context(
            './../images/Cards',
            false,
            /\.(png|jpe?g|svg)$/
         )
    );

然后将状态添加到“标签”组件中，然后单击按钮进行更改：

    state = {
        hideNameAndRole: false,
    }
    handleHideClick = () => this.setState(() => ({ hideNameAndRole: true })
    makeHeroCard = (hero, index) => (
        <Card
            title={hero.name}
            text={hero.type.join(', ')}
            image={heroCards[hero.name]}
            link={hero.name}
            key={index}
            hideNameAndRole={this.state.hideNameAndRole}
        />
    )
    ...
    render() {
        ...
        <button onClick={this.handleHideClick}>Click here and change css</button>
        ...
    }

您质疑提到的CSS，因此可以有条件地向其CSS添加插值，而不是有条件地渲染Name和Role。

    const Name = styled.h3`
        ...
        ${props => (props.hidden? 'visibility: hidden;' : '')}

    `

    const Role = styled.p`
        ...
        ${props => (props.hidden? 'visibility: hidden;' : '')}
    `

并通过相同的道具激活插值：

    const Card = props => (
        <Link to={props.link}>
            <Cardbox>
                <Cards bg={require(`./../images/Cards/${props.title}_Card.jpg`)}/>
                <div>
                    <Name hidden={props.hideNameAndRole}>{props.title}</Name>
                    <Role hidden={props.hideNameAndRole}>{props.text}</Role>
                </div>
            </Cardbox>
        </Link>
    )

单击样式化组件时更改CSS（地图功能）

1 个答案: