Question

这个想法是捕获BigBoard的state.logoClassName并将其传递给smallSquare.js中的图像className。当我在className（smallSquare.js）中写任何“字符串”时，但当我调用{props.logoClassName}时，将显示徽标，但不再显示徽标。其他道具可以毫无问题地传递到其他组件。知道为什么吗？

BigBoard.js

import React, { Fragment } from 'react';
import SmallSquare from './SmallSquare';
import './BigBoard.css';
import SelectTeam from './SelectTeam';
import './Button.css';
import styled from 'styled-components';
import { positions } from '@material-ui/system';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';


const BigContainer = styled.div`
    position: relative;
`;

export default class BigBoard extends React.Component {
  state = {
    gameStarted: false,
    squareIndex: null,
    logoClassName: "logoDisplayed",            
    clickedIndex: false,
    teamChosen: false,
    counter: 0,
    smallSquaresArray: ["","","","","","","","","","","","","","","","","","","","","","","",],                     
    logoSelected: ''
  }

BigBoard.js中的渲染

BigBoard.js     
render() {
        return ( 
           <Fragment>
           <div className='pantalla'>
             {this.state.teamChosen === false 
             ? <SelectTeam printName={this.printName} imageList={this.state.imageList}/>
             : <div>
                <div className="img-container" flexGrow={1}>
                <Grid container spacing={3} >                            
                    {this.state.smallSquaresArray.map((x, index) =>            
                        <Grid item xs={3} style={{height: 90, border: '1px solid black'}} > 
                          <SmallSquare 
                            zIndex={index} 
                            logo={this.state.logoSelected} 
                            show={index === this.state.squareIndex} 
                            logoClassName={this.state.logoClassName} 
                            itemClicked={this.itemClicked}    
                           />
                        </Grid>                         
                    )}
                    </Grid>

                </div><br/>
               <p>{this.state.counter}</p>
               { this.state.gameStarted 
               ? <button className="resetResultButton" onClick={this.restartCounter}>RESET THE RESULT</button>
               : <button className="startGameButton" onClick={this.onClickStart}>START</button>
              }
               </div>
             }
           </div>
           </Fragment>
        )
      }
    }

SmallSquare.js

import React from 'react';
import styled from 'styled-components';
import "./SmallSquare.css";
import './BigBoard.css'
import CardMedia from '@material-ui/core/CardMedia';


function SmallSquare (props) {
    props.show
        ? <CardMedia
            className={props.logoClassName}
            image={props.logo}
            title="team logo"
            onClick={props.itemClicked}
          />
       : null
}

 export default SmallSquare;

Answer 1

我发现问题出在背景上，因为材料用户界面的更改非常复杂。因此，我找到了一种更简单的方法来避免直接在className中传递道具：

props.randomSquare && !props.logoClicked    
    ?            
        <img 
        className="logoDisplayed"   
        onClick={props.itemClicked} 
        className="teamLogo" 
        src={props.logo} 
        alt='team flag'
        />

        : props.randomSquare && props.logoClicked
        ? 
        <img 
        className="logoHidden" 
        onClick={props.itemClicked} 
        className="teamLogo" 
        src={props.logo} 
        alt='team flag'
        style={{opacity: '0'}}
        />

        : null
)

材质UI卡背景图片无法识别道具

1 个答案: