React Class 中的条件修改样式

Question

我试图在找到单词时将 TIP 弹出窗口中的单词划掉。

找到单词时的代码

  verifyFindWord = (words) => {
for (let word of words) {
  let lettersSelected = this.getLetterSelectedSameWord(word);

  if (lettersSelected == word.length) {
    alert("You find the word: " + word);
  }
}

};

我创建了这个 css 代码，它显示了所有被划掉的词，我的想法是如果找到这个词，这个词应该被自动划掉。

<div className="words">
                  {words.map((word, index) => (
                    <span
                      key={word + index}
                      className={word ? "finded" : ""}
                    >
                      {word}
                      <br />
                    </span>
                  ))}
                </div>

Answer 1

我认为你需要使用状态对象并添加一个 key/value:

const [isCrossed, setIsCrossed] = useState({isCrossed : false }) // init state

如果找到该词，则在您的标签 <tag className={ isCrossed ? "crossed" : "uncrossed"}>{word}</tag> 上添加条件 class 以显示

Answer 2

而不是：

words: ["Rectang", "Circle", "Donut", "A", "Arc", "EL", "Elipses", "DO"],

我将使用：

words: ["Rectang", "Circle", "Donut", "A", "Arc", "EL", "Elipses", "DO"].map(word => ({found: false, word})),

所以每个单词都有一个状态，当你找到一个单词时你必须更新它，你可以用它来划掉单词。类似于：

  if (lettersSelected == word.length) {
    alert("You find the word: " + word);
    state.words = state.words.map(w => (w.word === word ? { word, found: true} : w)); 
  }

在你的 html 中：

{words.map((word, index) => (
    <span
       key={word.word + index}
       className={word.found ? "finded" : ""}
    >
       {word.word}
       <br />
    </span>
 ))}

您的代码已修复：

import React, { Component } from "react";
import { Board } from "../../components/Board";
import "./styles.css";
import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Popover from "react-bootstrap/Popover";
import Button from "react-bootstrap/Button";
//import getWords from '../../utils/words';

import { createGame } from "hunting-words";

const options = {
  wordsCross: false,
  inverseWord: false,
  wordInVertical: true,
  wordInHorizontal: true,
  wordDiagonalLeft: false,
  wordDiagonalRight: false
};

export default class Easy extends Component {
  state = {
    columns: 16,
    rows: 16,
    game: new createGame(0, 0, []),
    words: ["Rectang", "Circle", "Donut", "A", "Arc", "EL", "Elipses", "DO"].map(word => ({found: false, word})),
  };

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const { rows, columns, words } = this.state;
    this.setState({
      game: new createGame(rows, columns, words, options)
    });
  }

  getLetterSelectedSameWord = (word) => {
    let lettersSelected = 0;
    this.state.game.board.filter((row) => {
      lettersSelected =
        lettersSelected +
        row.filter((el) => {
          return el.word === word && el.isSelected;
        }).length;
    });

    return lettersSelected;
  };

  verifyFindWord = (words) => {
    for (let word of words) {
      let lettersSelected = this.getLetterSelectedSameWord(word.word);

      if (lettersSelected === word.word.length) {
        alert("You find the word: " + word.word);
        this.setState({words: this.state.words.map(w => (w.word === word.word ? { word, found: true} : w))}); 
      }
    }
  };

  selectLetter = (item) => {
    let game = this.state.game;

    game.board[item.row][item.column].setIsSelected(!item.isSelected);

    this.setState({
      game: game
    });
    this.verifyFindWord(item.word);
  };
  wordsText = () => {};
  render() {
    const { rows, columns, board, words } = this.state.game;

    return (
      <div>
        <div className="easy-container">
          <h1>Hunting-Words</h1>

          <Board board={board} selectLetter={this.selectLetter.bind(this)} />
          {["top"].map((placement) => (
            <OverlayTrigger
              trigger="click"
              key={placement}
              placement={placement}
              overlay={
                <Popover id={`popover-positioned-${placement}`}>
                  <Popover.Title as="h3">{`WORDS:`}</Popover.Title>
                  <Popover.Content>
                    <div className="words">
                      {words.map((word, index) => (
                        <span
                          key={word.word + index}
                          className={word.found ? "finded" : ""}
                        >
                          {word.word}
                          <br />
                        </span>
                      ))}
                    </div>
                  </Popover.Content>
                </Popover>
              }
            >
              <Button variant="secondary">TIP</Button>
            </OverlayTrigger>
          ))}
        </div>
      </div>
    );
  }
}

Answer 3

在 <span> 标签中，className 值必须考虑 word 在找到的单词列表中的存在。例如，findedWords.includes(word):

<div className="words">
    { words.map((word, index) => (
        <span key={word + index}
              className={this.state.findedWords.includes(word) ? "finded" : ""}>
            {word}<br />
        </span>
    ))}
</div>

因此，在 verifyFindWord 函数中您预填充了 findedWords 列表：

verifyFindWord = words => {
    for (let word of words) {
        let lettersSelected =
            this.getLetterSelectedSameWord(word);

        if (lettersSelected == word.length) {
            alert("You find the word: " + word);
            const findedWords = this.state.findedWords;
            findedWords.push(word);
            this.setState({ findedWords });
        }
    }
}

React Class 中的条件修改样式

Condition in React Class to modify style

reactjs

react-router

react-bootstrap

react-component

react-class-based-component