Context.Provider 和 Context.Consumer 和 JavaScript 中的 document.querySelector() 一樣嗎？

Question

單擊按鈕時，我只想在 Home.js 中獲取 div 的文本...我已經設置了 createContext();

我試過使用 Refs 它不起作用..所以現在我正在嘗試 createContext()...在 themeContext.js 我有一個 handleChange function 單擊時傳遞給 Button.js 我只是喜歡文本內容Home.js 中的一個 div。

實時代碼

索引.js：

import React from "react";
import ReactDOM from "react-dom";
import { ThemeContextProvider } from "./themeContext";

import App from "./App";
const RootElement = document.getElementById("root");

ReactDOM.render(
  <ThemeContextProvider>
    <App />
  </ThemeContextProvider>,
  RootElement
);

主題上下文.js：

import React, { Component } from "react";
const { Provider, Consumer } = React.createContext();

class ThemeContextProvider extends Component {
  state = {
    test: "test"
  };

  handleChange = () => {
    this.test.textContent
  };

  render() {
    return (
      <Provider
        value={{ test: this.state.test, handleChange: this.handleChange }}
      >
        {this.props.children}
      </Provider>
    );
  }
}

export { ThemeContextProvider, Consumer as ThemeContextConsumer };

按鈕.js：

import React from "react";
import { ThemeContextConsumer } from "./themeContext";

export default function Button(props) {
  return (
    <>
      <ThemeContextConsumer>
        {context => <button onClick={context.handleChange}>ooMe</button>}
      </ThemeContextConsumer>
    </>
  );
}

主頁.js：

import React from "react";
import { ThemeContextConsumer } from "./themeContext";
import Button from "./Button";

export default function Home(props) {
  return (
    <>
      <ThemeContextConsumer>
        {context => (
          <>
            <div className={context.test}>You Exposed Me!</div>
            <br />
            <h4>
              Button From Test:
              <br />
              <Button handleChange={context.handleChange} />
            </h4>
          </>
        )}
      </ThemeContextConsumer>
    </>
  );
}

應用程序.js

import React from "react";
import "./styles.css";
import Home from "./Home";
import Another from "./Another";

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

Answer 1

如果您的意圖只是獲取元素值，那么您可以為此使用 refs。

 function App() { const divRef = React.useRef(null); function handleClick() { console.log(divRef.current.textContent); } return ( <div> <div ref={divRef} onClick={handleClick}> Foo </div> <Button onClick={handleClick} /> </div> ); } function Button({ onClick }) { return <button onClick={onClick}>Click me</button> } ReactDOM.render(<App />, document.getElementById("root"));

 <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root" />

當您第一次檢查您正在嘗試的庫的基本步驟時，這很簡單。 有大量體面的文檔。

另外，如果你打算使用 React，我強烈建議你以 React 的方式思考。 您不會看到很多代碼試圖獲取這樣的元素值。

Answer 2

我使用了上面的@devserken 示例和這個解決方案來提出這個解決方案。 我使用了本示例中的組件名稱，因為組件名稱不是我要學習的重點。 我的目標是學習如何抓取/捕獲 DOM 元素，在這種特殊情況下，當單擊按鈕時，控制台會記錄 textContent。

Answer 3

嘿，我已經更新了鏈接https://codesandbox.io/s/winter-cdn-uqc5c

如果您想更新需要調用的視圖，基本上會做出反應

setState

觸發重新渲染

更多信息： https://reactjs.org/docs/react-component.html#setstate