Являются ли Context.Provider и Context.Consumer такими же, как document.querySelector () в JavaScript?

Question

Я бы просто хотел получить текст div в Home. js когда кнопка нажата ... Я настроил createContext ();

Я пытался использовать Refs it не работает .. так что теперь я пытаюсь createContext () ... В themeContext. js У меня есть функция handleChange, которая передается в Button. js при нажатии я просто хотел бы текстовое содержимое div в доме. js.

живой код

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

Кнопка. 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

Если ваше намерение просто получить значение элемента, вы можете использовать ссылки для этого.

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" />

Это просто, когда вы впервые проверяете базовые c шаги для библиотеки, которую вы пытаетесь. Есть тонны приличной документации.

Кроме того, если вы собираетесь использовать 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