Question

我有以下代码

我有“应用程序”组件，其中有两个同级组件：“第一”组件和“第二”组件。

    export default function App() {
      return (
        <div className="App">
           <First />
           <Second />
       </div>
      );
    }

在“第一个”组件中，我有一个按钮，单击后应更改“第二个”组件的文本样式

    function First() {
      const myFunction(){
        let myStyle = document.getElementById("myStyle");
        myStyle.style.color = "red";
        myStyle.style.fontSize = "20px";
        myStyle.style.letterSpacing = "5px";
      }
      return (
        <div>
          <input type="button" value="Click" onClick={myFunction} />
        </div>
      );
    }
    export default First;

我知道我为这种情况编写了错误的代码，但是请您帮我以正确的方式重写此代码？

Answer 1

您可以使用forwardRef来实现此https://codesandbox.io/s/xenodochial-bush-wuxn0

// App.js

import React from "react";
import "./styles.css";
import First from "./Components/First";
import Second from "./Components/Second";
export default function App() {
  const [secondTextEl, setSecondTextEl] = React.useState(null);

  const textRef = React.useCallback(node => {
    if (node !== null) {
      setSecondTextEl(node);
    }
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <First secondText={secondTextEl} />
      <Second ref={textRef} />
    </div>
  );
}


// First.jsx

import React from "react";

function First({ secondText }) {
  function myFunction(props) {
    secondText.style.color = "red";
    secondText.style.fontSize = "20px";
    secondText.style.letterSpacing = "5px";
  }
  return (
    <div>
      <input type="button" value="Click" onClick={myFunction} />
    </div>
  );
}
export default First;

// Second.jsx

import React from "react";

function Second(props, ref) {
  return (
    <div>
      <div ref={ref} id="myStyle">
        Change my style
      </div>
    </div>
  );
}
export default React.forwardRef(Second);

reactjs中的兄弟功能组件通信

1 个答案: