Как использовать результаты Axios в различных классах реагирования - PullRequest
Новая
       1

Как использовать результаты Axios в различных классах реагирования

0 голосов
/ 17 октября 2018

У меня есть в основном HTML-документ с различными элементами DOM, которые я хочу заполнить данными, поступающими из реакции. 

<html> .... 

<div id="value1">
....
<div id="value2">

</html>

Затем у меня есть файл index.js, который связывает каждый элемент dom с) класс реакции: 

import ClassName1 from ?...?;
ReactDOM.render(<ClassName1 />, document.getElemnentById('value1'));

Нет, у меня есть класс React, который делает что-то подобное: 

class ClassName1 extends Component 

  constructor()
  ...
  componentDidMount() 
    axios-call
     => return value1,value2

То, чего я хочу достичь, это 

render(value1 => DOM(1) , value2 => DOM(2))

Ответы [ 2 ]

0 голосов
/ 17 октября 2018

Простой ответ (но плохо) - Вы можете просто сделать дважды в другом корне, как показано ниже. 

import React from "react";
import ReactDOM from "react-dom";

function App({ value }) {
  return <div className="App">{value}</div>;
}

const root1 = document.getElementById("root1");
ReactDOM.render(<App value="value1" />, root1);

const root2 = document.getElementById("root2");
ReactDOM.render(<App value="value2" />, root2);

Edit soanswer52856523

Но проблема в том, что теперь эти два компонента не находятся в одном и том же дереве React, поэтому не могут взаимодействовать друг с другом.

Если вам нужен центральный контейнер, который извлекает данные, но хочет передавать данные, вы можете использовать React Portal в v16 +.

Вы можете сделать что-то сумасшедшее, например this с Portal.

Предположим,что вы хотите передать value1 & value2 следующим div с. 

<body>
  <div id="root"></div>
  <div id="value1">
  <div id="value2">
...
</body>

, где root div - это главное дерево React, на котором смонтировано.

Вы можете создатьпортал, монтируясь на эти value1&2 div, как показано ниже. 

import React, { Component } from "react";
import ReactDOM from "react-dom";

class ValuePortal extends Component {
  constructor(props) {
    super(props);
    this.el = document.getElementById(props.elementID);
  }

  render() {
    return ReactDOM.createPortal(this.props.value, this.el);
  }
}

function App() {
  return (
    <div className="App">
      <ValuePortal elementID="value1" value="for value1" />
      <ValuePortal elementID="value2" value="for value2" />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Ваш основной контейнер монтируется в root, как показано выше, и значения отображаются с использованием компонента портала, ValuePortal.

Вы можете следить за CodeSandBox.
Edit soanswer52856523-portal

0 голосов
/ 17 октября 2018

То, что вы хотите сделать, не похоже на то, на что вы хотели бы реагировать.Но я дам вам два сценария:

Сценарий 1 : вы хотите, чтобы два «дочерних компонента» отображались с значениями, отличными от того, что вы получили из вызова axios.

Лучшее решение для этого - просто отобразить два разных компонента, например: 

class Foo extends React.Component {
  constructor() {
    this.state = {
      value1: null,
      value2: null,
    };
  }

  componentDidMount() {
    axios(someUrl).then(response => {
     const value1 = response.body.value1;
     const value2 = response.body.value2;

     this.setState({ value1, value2 });
    });
  }

  render() {
    return(
      <React.Fragment>
        <div id="value1">{value1}</div>
        <div id="value2">{value2}</div>
      </React.Fragment>
    );
  }
}

Сценарий 2 : вы хотите изменить другие элементы DOM, которые не являются частью дерева реакции.

В этом случае вы можете получить элементы DOM по их идентификатору и изменить содержимое при возврате вызова axios, примерно так: 

class Foo extends React.Component {
  constructor() {
    this.state = {
      value1: null,
      value2: null,
    };
  }

  componentDidMount() {
    axios(someUrl).then(response => {
     const value1 = response.body.value1;
     const value2 = response.body.value2;

     this.setState({ value1, value2 });

     const element1 = document.getElementById('value1');
     element1.innerHTML = value1;

     const element2 = document.getElementById('value2');
     element2.innerHTML = value2;
    });
  }

  render() {
    return(null);
  }
}

В сценарии 2 вы быменять вещи за пределами дерева реакции ... что нетрадиционно, но, похоже, это то, что вы просите.Помните, что вам потребуется div с идентификаторами value1 и value2 в DOM, прежде чем вызов axios вернется со значениями.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...