Context.Provider 和 Context.Consumer 和 JavaScript 中的 document.querySelector() 一样吗？

Question

我只想在单击按钮时在 Home.js 中获取 div 的文本...我已经设置了 createContext();

我尝试使用 Refs 它不起作用..所以现在我正在尝试 createContext()... Home.js 中一个 div 的文本内容。

live code

Index.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
);

themeContext.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 };

Button.js：

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

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

Home.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>
    </>
  );
}

App.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 示例和这个solution 来提出这个solution。我使用来自this example 的组件名称，因为组件名称不是我想要学习的重点。我的目标是学习如何抓取/捕获 DOM 元素，在这种特殊情况下，当单击按钮时，控制台会记录 textContent。

Answer 3

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

如果你想更新你需要调用的视图，基本上是在反应

setState

触发重新渲染

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