Change Color Element using React

Day 31/100 #100DaysOfCode

Nay tìm hiểu cách thay đổi màu của phần tử Element trong React, mới tìm hiểu được cách dùng useRef để gọi Dom vị trí hiện tại của thẻ Element, sau đó for lấy thẻ tag name có chứa mã màu rồi, element[i].style.color=tagcolor.  

Đầu tiên tạo project. : 

npx create-react-app basic

Sau đó ta chạy thử đoạn code sau:

import logo from './logo.svg';
import './App.css';
import React, { useEffect, useRef, useState } from 'react';
function App() {
  const devRef = useRef(null);
  const [tag, setTag] = useState([]);
  const dataJSON = [
    {
      "tagColor": "#D62408",
      "index":1,
      "image":"abc.jpg",
      "tag":"abc",
      "text":"Noi dung 1"

    },
    {
      "tagColor": "#1EE602",
      "index":2,
      "image":"acd.jpg",
      "tag":"ecd",
      "text":"Noi dung 2"

    },

  ]
  useEffect(() => {

    /*
    console.log(devRef);
    console.log(devRef.current)
    const { childNodes } = devRef.current;
    const { children } = devRef.current;
    console.log(children)

*/
    /*
    cach 1
    for add color*/
    
    var elements = document.getElementsByClassName("n");
    console.log(elements);
    for (var i = 0, len = elements.length; i < len; i++) {
      let color = elements[i].getAttribute("tag-color");
      console.log(color);
      elements[i].style.color = color;
    }
    /*end*/

    /** cach 2 */
    const { children } = devRef.current;
    console.log(children);
    for (var i = 0, len = children.length; i < len; i++) {
      let color = children[i].getAttribute("tag-color");
      if(color!==null){
        console.log("Mau:"+color);
        children[i].style.color = color;
      }
     
    }

  }, []);

  const showAllColor = () => {
    console.log(tag);
  }

  const renderContent = (item) => {
    const {tagColor,image,index,tag,text} = item;
    
    return <div key={index}><div 
    data-html={true} data-for={`a${index}`} 
    data-tip={`<img width='200' height='200' src="${image}" />`} > 
    <div className="entities">
      <mark data-entity={tag} 
      tag-color={tagColor} style={{color:tagColor}}>{text}</mark> </div></div>
      <div id={`a${index}`} place="right" /></div>

  }

  return (
    <div className="App" ref={devRef}>
      <span tag-color="#55C00A" className="n">ABC</span>
      <span tag-color="#F24F08" className="n">XYZ</span>
      <button onClick={() => showAllColor()}>ShowOnColor</button>
      <br/>
      {
        dataJSON.map(item=>renderContent(item))
      }
    </div>
  );
}

export default App;