Javascript 如何从另一个组件引用在组件中找到的另一个元素？

我正在尝试从自定义组件访问计算器组件中的按钮元素。我试图控制按钮元素，以便创建另一个允许自定义的函数，就像自定义组件中的其他函数一样。我想用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;

从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Route}；
从“/Calculator”导入计算器；
从“/Navbar”导入导航栏；
从“/Customize”导入自定义；
常量应用=（）=>{
返回(
(
)}
/>
(
)}
/>
);
};
导出默认应用程序；

从“mathjs”导入{create，all}；
从“React”导入React，{useState}；
导入“./css/Calculator.css”；
常量计算器=（）=>{
常量[状态，设置状态]=使用状态（“0”）；
const[calculation，setCalculation]=useState（“”）；
const config={}；
常量数学=创建（全部，配置）；
常量handleClick=（e）=>{
常量值=e.target.textContent；
如果(
值==“=”&&
（状态！==“+”||
状态！==“-”||
状态！=“*”||
状态！==“/”||
状态！=“=”）
) {
const decimalIdx=计算指数（“.”）；
const distanceFromLastNum=calculation.length-1-十进制；
const total=计算+状态；
setCalculation（（上一个）=>
distanceFromLastNum值==“±”？上一个：）；
}
如果(
值=“±”&&
状态！==“+”&&
状态！==“-”&&
状态！=“*”&&
状态！==“/”
) {
setState（（prev）=>（prev[0]！==“-”？`-${prev}`:prev.slice（1））；
}
if（state.includes（“.”）==false&&value！==“±”&&value！==”）{
设置状态（（prev）=>prev+值）；
}否则，如果（值！=“&&value！=”±“&&value！=”）{
设置状态（（prev）=>prev+值）；
}
如果(
状态=“0”&&
值！==“+”&&
值！=“-”&&
值！=“*”&&
值！==“/”&&
值！=“=”
) {
设置状态（（上一个）=>
值==“±”&&prev==“0”
？`-${prev}`
：value==“±”&&prev==“-0”
？上
：价值
);
设置计算（“”）；
}否则如果(
值==“+”||
值=“-”||
值=“/”||
值=“*”
) {
const lastChar=calculation[calculation.length-1]；
如果(
lastChar==“+”||
lastChar==“-”||
lastChar==“/”||
lastChar==“*”||
lastChar==未定义
) {
如果(
状态==“+”||
状态==“-”||
状态==“*”||
状态==“/”||
状态==”||
状态==“-”||
状态=“±”||
状态==“=”
) {
设置状态（值）；
}否则{
setCalculation（（prev）=>prev+状态+值）；
设置状态（值）；
}
}否则{
设置状态（值）；
}
}否则{
如果(
状态==“+”||
状态==“-”||
状态==“*”||
状态==“/”||
状态=“±”
) {
设置状态（值）；
}否则{
如果(
值！=“0”||
值！==“+”||
值！=“-”||
值！=“*”||
值！==“/”||
值！=“=”
) {
如果（值！=“=”&&value！=“±”&&value=”）{
设置状态（（上一个）=>（值==”？上一个：上一个+值））；
}
}
}
}
如果（值=“C”）{
设置状态（“0”）；
设置计算（“”）；
}
};
返回(
{计算}
{state}
handleClick（e）}>
C
handleClick（e）}>
±
handleClick（e）}>
/
handleClick（e）}>
*
handleClick（e）}>
7.
handleClick（e）}>
8.
handleClick（e）}>
9
handleClick（e）}>
-
handleClick（e）}>
4.
handleClick（e）}>
5.
handleClick（e）}>
6.
handleClick（e）}>
+
handleClick（e）}>
1.
handleClick（e）}>
2.
handleClick（e）}>
3.
handleClick（e）}>
=
handleClick（e）}>
0
handleClick（e）}>
.
);
};
导出默认计算器；

导入“./css/Customize.css”；
const Customize=（{tester}）=>{
const setBackgroundColor=（）=>{
const color=document.getElementById（“背景”）.value；
document.body.style.backgroundColor=颜色；
};
常量setNavbarColor=（）=>{
const color=document.getElementById（“navbar”）.value；
document.getElementsByTagName（“nav”）[0].style.backgroundColor=color；
}
返回(
背景
变色
航行
变色
);
};
导出默认自定义；

您的问题是希望传递状态，并在不同的组件中进行更改。在React world中，如果没有任何库，则必须在两个组件的顶层定义变量/函数，即

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

---

App.js如果在应用程序级别存储一个状态，然后创建一个函数来更新该状态，则更符合逻辑。然后，可以将此状态传递给要更改其样式的零部件。同样，您也可以传递更新
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;


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