使用 React 动态添加元素和类

维格德夫

我正在尝试构建一个小型应用程序，该应用程序接受用户输入的文本并突出显示用户输入的每个单词中的辅音和元音。

我不确定如何将span通过函数调用创建的新元素添加到实际的 DOM 中（我是新手）。

这是我到达的地方：

import React from "react";

import "./AnalysisArea.css";

const AnalysisArea = (props) => {
  const graphemes = props.text.split("");
  console.log(graphemes);
  const analyseText = () => {
    const getClass = (character) => {
      if (["a", "e", "i", "o", "u"].includes(character)) {
        return "vowel-class";
      } else {
        return "consonant-class";
      }
    };

    //the span
    return graphemes.map((character, i) => {
      return(
      <span class={getClass(character)}>
        {(i === 0 ? "" : ",") + character}
      </span>
      )
    });
  };

  return (
    <div className="analysisframe">
      <button onClick={analyseText}>Analyse</button>
      <div>
        <p>{props.text}</p> //this is where the span should go 
      </div>
    </div>
  );
};

export default AnalysisArea;

空间奥斯汀

Array.prototype.map()用于渲染 React 元素是很常见的。我会建议这样的事情：

import React, { useState } from "react";

import "./AnalysisArea.css";

const getClass = (character) => {
  if (["a", "e", "i", "o", "u"].includes(character)) {
    return "vowel-class";
  } else {
    return "consonant-class";
  }
};

const AnalysisArea = (props) => {
  const [showAnalysis, setShowAnalysis] = useState(false);

  return (
    <div className="analysisframe">
      <button onClick={() => setShowAnalysis(true)}>Analyse</button>
      <div>
        <p>
          {showAnalysis &&
            props.text.split("").map((character, i) => {
              return (
                <span key={i} class={getClass(character)}>
                  {(i === 0 ? "" : ",") + character}
                </span>
              );
            })}
        </p>
      </div>
    </div>
  );
};

export default AnalysisArea;