Карточка Material-UI Фоновое изображение не распознает реквизит - PullRequest
Новая
       32

Карточка Material-UI Фоновое изображение не распознает реквизит

0 голосов
/ 18 марта 2020

Идея состоит в том, чтобы поймать state.logoClassName de BigBoard, чтобы передать его в изображение className в smallSquare. js. Когда я пишу любую «строку» в className (smallSquare. js), lo go отображается НО, когда я вызываю {props.logoClassName}, lo go больше не отображается. Другие реквизиты передаются другим компонентам без каких-либо проблем. Есть идеи почему?

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;

1 Ответ

0 голосов
/ 22 марта 2020

Я обнаружил, что проблема заключается в том, что фоны сложно изменить в Material-UI. Поэтому я нашел более простой способ избежать передачи реквизита непосредственно в 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
)
...