Question

我基本上有一个包含各种DOM元素的html文档，我想用来自React的数据来填充。

    namespace App;

    use Illuminate\Database\Eloquent\Model;

    class Translation extends Model
    {
        protected $table = 'translations';
        protected $primaryKey = 'translations_id';
        protected $keyType = 'int';
        public $incrementing = true;
        public $timestamps = false;

        public function country() {
            return $this->belongsTo('country', 'translations_id', 'translations_id');
        }

        public function addresstype() {
            return $this->belongsTo('addresstype', 'translations_id', 'translations_id');
        }
    }

然后我有一个index.js文件，该文件将每个dom元素与一个（不同的）react类相关联：

<html> .... 

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

</html>

不，我有一个像这样的React类：

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

我想要实现的是

class ClassName1 extends Component 

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

Answer 1

您想做的事情似乎并不像您想使用的反应。但我给你两种情况：

场景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元素。

在这种情况下，您可以按其ID获取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中，您将在反应树之外更改内容……这是非常规的，但这似乎正是您所要的。请记住，在axios调用返回值之前，您的DOM中将需要具有value1和value2 id的div。

Answer 2

简单答案（但不好）-您可以在不同的根目录中简单地渲染两次，如下所示。

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

但是问题是，现在这两个组件不在同一个React树中，因此无法彼此通信。

如果您需要一个用于检索数据但想要传递数据的中央容器，则可以在v16 +中使用React Portal。

您可以使用Portal进行类似this的疯狂操作。

假设您要将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。

如何使用axios导致各种反应类别

2 个答案: