如何從另一個組件引用在組件中找到的另一個元素？

Question

我正在嘗試從我的自定義組件訪問我的計算器組件中的按鈕元素。 我正在嘗試獲取按鈕元素，以便我可以創建另一個允許自定義的函數，就像我的自定義組件中的其他函數一樣。 我想使用 javascript 從我的自定義組件更改按鈕顏色，但它似乎不起作用。 我假設我的客戶。 補償沒有訪問權限。我肯定可以使用一些幫助來解決這個問題。

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Calculator from "./Calculator";
import Navbar from "./Navbar";
import Customize from "./Customize";


const App = () => {
  return (
    <Router>
    <Navbar />
        <Route
          exact
          path="/"
          render={() => (
              <Calculator />
          )}
        />
        <Route
          exact
          path="/Customize"
          render={() => (
              <Customize />
          )}
        />
    </Router>
  );
};

export default App;

import { create, all } from "mathjs";
import React, { useState } from "react";
import "../css/Calculator.css";

const Calculator = () => {
  const [state, setState] = useState("0");
  const [calculation, setCalculation] = useState("");
  const config = {};
  const math = create(all, config);

  const handleClick = (e) => {
    const value = e.target.textContent;

    if (
      value === "=" &&
      (state !== "+" ||
        state !== "-" ||
        state !== "*" ||
        state !== "/" ||
        state !== "=")
    ) {
      const decimalIdx = calculation.indexOf(".");
      const distanceFromLastNum = calculation.length - 1 - decimalIdx;
      const total = calculation + state;
      setCalculation((prev) =>
        distanceFromLastNum <= 4
          ? `${prev}${state}=${
              math.round(math.evaluate(prev + state) * 10000) / 10000
            }`
          : `${prev}${state}=${math.evaluate(prev + state)}`
      );
      setState((math.round(math.evaluate(total) * 10000) / 10000).toString());
    }
    if (
      calculation.includes("=") === true &&
      (value === "+" || value === "-" || value === "*" || value === "/")
    ) {
      setCalculation(state + value);
      setState(value);
    } else if (calculation.includes("=") === true) {
      setCalculation("");
      setState(prev => value === "±" ? prev : "");
    }
    if (
      value === "±" &&
      state !== "+" &&
      state !== "-" &&
      state !== "*" &&
      state !== "/"
    ) {
      setState((prev) => (prev[0] !== "-" ? `-${prev}` : prev.slice(1)));
    }
    if (state.includes(".") === false && value !== "±" && value !== "=") {
      setState((prev) => prev + value);
    } else if (value !== "." && value !== "±" && value !== "=") {
      setState((prev) => prev + value);
    }

    if (
      state === "0" &&
      value !== "+" &&
      value !== "-" &&
      value !== "*" &&
      value !== "/" &&
      value !== "="
    ) {
      setState((prev) =>
        value === "±" && prev === "0"
          ? `-${prev}`
          : value === "±" && prev === "-0"
          ? prev
          : value
      );
      setCalculation("");
    } else if (
      value === "+" ||
      value === "-" ||
      value === "/" ||
      value === "*"
    ) {
      const lastChar = calculation[calculation.length - 1];
      if (
        lastChar === "+" ||
        lastChar === "-" ||
        lastChar === "/" ||
        lastChar === "*" ||
        lastChar === undefined
      ) {
        if (
          state === "+" ||
          state === "-" ||
          state === "*" ||
          state === "/" ||
          state === "." ||
          state === "-." ||
          state === "±" ||
          state === "="
        ) {
          setState(value);
        } else {
          setCalculation((prev) => prev + state + value);
          setState(value);
        }
      } else {
        setState(value);
      }
    } else {
      if (
        state === "+" ||
        state === "-" ||
        state === "*" ||
        state === "/" ||
        state === "±"
      ) {
        setState(value);
      } else {
        if (
          value !== "0" ||
          value !== "+" ||
          value !== "-" ||
          value !== "*" ||
          value !== "/" ||
          value !== "="
        ) {
          if (value !== "=" && value !== "±" && value === ".") {
            setState((prev) => (value === "." ? prev : prev + value));
          }
        }
      }
    }
    if (value === "C") {
      setState("0");
      setCalculation("");
    }
  };
  return (
    <div className="calculator">
      <div id="display" style={{ fontSize: "16px", height: "3.5vh" }}>
        {calculation}
      </div>
      <div id="display">{state}</div>
      <div className="divider"></div>
      <div className="calculator-buttons">
        <button className="btn" id="clear" onClick={(e) => handleClick(e)}>
          C
        </button>
        <button className="btn" id="conversion" onClick={(e) => handleClick(e)}>
          ±
        </button>
        <button className="btn" id="divide" onClick={(e) => handleClick(e)}>
          /
        </button>
        <button className="btn" id="multiply" onClick={(e) => handleClick(e)}>
          *
        </button>
        <button className="btn" id="seven" onClick={(e) => handleClick(e)}>
          7
        </button>
        <button className="btn" id="eight" onClick={(e) => handleClick(e)}>
          8
        </button>
        <button className="btn" id="nine" onClick={(e) => handleClick(e)}>
          9
        </button>
        <button className="btn" id="substract" onClick={(e) => handleClick(e)}>
          -
        </button>
        <button className="btn" id="four" onClick={(e) => handleClick(e)}>
          4
        </button>
        <button className="btn" id="five" onClick={(e) => handleClick(e)}>
          5
        </button>
        <button className="btn" id="six" onClick={(e) => handleClick(e)}>
          6
        </button>
        <button className="btn" id="add" onClick={(e) => handleClick(e)}>
          +
        </button>
        <button className="btn" id="one" onClick={(e) => handleClick(e)}>
          1
        </button>
        <button className="btn" id="two" onClick={(e) => handleClick(e)}>
          2
        </button>
        <button className="btn" id="three" onClick={(e) => handleClick(e)}>
          3
        </button>
        <button className="btn" id="equal" onClick={(e) => handleClick(e)}>
          =
        </button>
        <button className="btn" id="zero" onClick={(e) => handleClick(e)}>
          0
        </button>
        <button className="btn" id="decimal" onClick={(e) => handleClick(e)}>
          .
        </button>
      </div>
    </div>
  );
};

export default Calculator;

import "../css/Customize.css";
const Customize = ({tester}) => {
  const setBackgroundColor = () => {
    const color = document.getElementById("background").value;
    document.body.style.backgroundColor = color;
  };
  const setNavbarColor = () => {
    const color = document.getElementById("navbar").value;
    document.getElementsByTagName("nav")[0].style.backgroundColor = color;
  }
  return (
    <div className="flexbox">
      <div className="customize">
        <h5 style={{ color: "white" }}>Background </h5>
        <input type="color" id="background" />
        <button className="btn" id="color-button" onClick={setBackgroundColor}>
          Color Change
        </button>
      </div>
      <div className="customize">
        <h5 style={{ color: "white" }}>Navigation </h5>
        <input type="color" id="navbar" />
        <button className="btn" id="color-button" onClick={setNavbarColor}>
          Color Change
        </button>
      </div>
    </div>
  );
};

export default Customize;

Answer 1

你的問題是你想傳遞狀態並在不同的組件中改變它。 在 React 世界中，沒有任何庫，您必須在兩個組件的頂層定義變量/函數，即

App.js <- define your variables + functions
  |__ Customize.js <- pass in the variables as props
  |__ Calculator.js <- pass in the variables + function as props

然后你可以在Customize.js操作它，整個應用程序將響應狀態變化。

當然，一旦您的應用程序變大，這將變得非常難以管理，因此我們通常使用全局狀態管理庫來幫助我們做到這一點，為了您的研究包括一些，您可以使用Redux或React Context 。

注意：盡量避免在 React 中使用原生 JS DOM 元素，因為 React 的生命周期/性質使得管理 DOM 元素變得困難，例如您的函數甚至可以在實際 DOM 加載之前觸發。