时间戳

首页 > 解决方案 > Context.Provider 和 Context.Consumer 和 JavaScript 中的 document.querySelector() 一样吗？

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

问题描述

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

我尝试过使用 Refs 它不起作用..所以现在我正在尝试 createContext()... 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>
  );
}

标签： javascriptreactjsdom

解决方案

如果您的意图只是获取元素值，那么您可以为此使用 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 的方式思考。您不会看到很多代码试图获取这样的元素值。

推荐阅读