J'ai une colonne pour les boutons pour basculer un modal. Le problème est que je ne veux pas afficher le bouton pour chaque ligne. Je veux seulement afficher le bouton sur la première entrée de la couleur. Notez que les couleurs sont imprévisibles (vous ne savez pas quelles couleurs seront affichées à l'avance).

Par exemple,

color toggler
black    +
red      +
red          //don't display it here
yellow   +
blue     +
blue        //don't display it here
blue        //don't display it here
orange   +
red      +
black    +
black       //don't display it here
blue     +

J'ai essayé de parcourir le document et quelques exemples, mais je n'arrive pas à trouver de solution (peut-être quelque chose que j'ai raté ?).

Ce que j'ai fait, c'est stocker la première couleur dans l'état. Ensuite, j'ai fait avec theCheckFunc :

let flag = true 
if (nextColor !== this.state.color)
 this.setState({color: nextColor})
 flag = false
return flag

Puis dans les colonnes je l'ai fait.

Cell: props => (this.theCheckFunc(props) && <div onClick={somefunc}> + <div>)

Cependant, tout semble figé. Le navigateur ne répond même pas. Une bonne suggestion sur la façon de faire cela?

2
utopia 15 mars 2019 à 17:35

2 réponses

Meilleure réponse

N'utilisez pas l'état avec cela, car vous ne voulez pas refaire le rendu en fonction d'une nouvelle entrée. Au lieu de cela, calculez le tableau dans le cadre du rendu.

Par exemple, en supposant que lorsque vous accédez à votre instruction de rendu, vous disposez d'un tableau aléatoire de couleurs comme celui-ci :

['red', 'red', 'black', 'purple', 'purple']

Ensuite, cette fonction pourrait créer le tableau dont vous avez besoin avec les données pour le rendu :

function getTableRowData(arr) {
  let tableRowData = []
  arr.forEach((color, n) => {
    let toggler = true
    if (n !== 0 && arr[n - 1] === color) {
      toggler = false
    }
    tableRowData.push({ color, toggler, })
  })
  return tableRowData
}

Ensuite, vous pouvez parcourir la tableRowData dans votre retour de rendu et l'afficher comme vous le souhaitez.

2
Craig Gehring 20 mars 2019 à 14:04

Définissez d'abord vos variables de contrôle de couleur dans l'état ou dans la classe où vous le souhaitez. Dans cet exemple, je choisis de les contrôler sur l'état.

constructor(props) {
        super(props);

            this.state = {
                firstRedAlreadyHere: false,
                firstBlueAlreadyHere: false,
                firstGrayAlreadyHere:false,
                ....
                ...
            }
}

Puis ouvrez une fonction pour préparer une table. Plus tard Utilisez cette fonction dans render() pour mettre la table sur le composant.

function putValuesToTable()
{

    let table = [];

        for (let i = 0; i < (YOUR_LENGTH); i++) {
            {
                let children = [];   /* SUB CELLS */

                /* IF RED COLOR IS NEVER CAME BEFORE, PUT A BUTTON NEAR IT */
                if(!this.state.firstRedAlreadyHere)
                children.push(<td>
                   <SomeHtmlItem></SomeHtmlItem></td> <td><button </button></td>)
                /* ELSE DON'T PUT BUTTON AND CHANGE STATE. */
                else
                {
                  children.push(<SomeHtmlItem></SomeHtmlItem>);
                  this.state.firstRedAlreadyHere = true;
                }
                table.push(<tr>{children}</tr>);
            }
        }
return table;
}

Je change d'état directement au lieu de this.setState() ; car je ne veux pas déclencher un rafraîchissement :). Dans la fonction de rendu, appelez putValuesToTable comme ceci

render()
{
return (<div>
<table>
         <tbody>
         <tr>
         <th>SomeParameter</th>
         <th>SomeParameter2</th>         
         </tr>
             {this.putValuesToTable}
         </tbody>
         </table>
</div>);
}

Utilisez cet exemple pour étendre votre code en fonction de votre objectif.

0
Yusuf Altıparmak 15 mars 2019 à 14:55