通过读取来反应加载页面

Question

我正在尝试在div中显示我的url / PaisForm的内容，但工作正常。 我的代码是这样的：

componentDidMount(){
    fetch('/PaisForm')
    .then(function(response) {
        return response.text();
    })
    .then(function(body) {
        document.querySelector('.Pais').innerHTML = body;
    });
}

这是我的div：

render() {
     return(

       <div className= "Pais">
       </div>
      );
    }
}

当我在function（body）中使用console.log时，我可以阅读以下内容：

您需要启用JavaScript才能运行此应用。

  You can add webfonts, meta tags, or analytics to this file. The build step will place the bundled scripts into the <body> tag. To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`.

感谢您的帮助，我不知道我是否在使用错误的获取。

Answer 1

您需要启用JavaScript才能运行此应用。

这意味着您的浏览器不允许运行任何Javascript 。

要在Chrome上无法使用Javascript ，您可以执行此操作（如果您使用的是其他浏览器，请在Google上Google如何在该特定浏览器上无法使用Javascript ）。

另一件事是，不要像这样直接操纵DOM ，

document.querySelector('.Pais').innerHTML = body;

相反，您可以在状态中使用变量，

state={body:''}

您可以使用setState ，

componentDidMount(){
    fetch('/PaisForm')
    .then(function(response) {
      return response.text();
    })
    .then(function(body) {
      this.setState({body});
    });
  }

您可以从状态渲染数据，

<div className= "Pais">
    {this.state.body}
</div>

更新资料

看来您正在尝试使用fetch在另一个组件中添加一个组件。

FYI fetch只是针对API调用。

要实际添加组件，您需要import该组件。

import PaisForm from "./file_path";

然后只需在所需的位置添加该组件，

<div className= "Pais">
    <PaisForm />
</div>

Answer 2

在您的react组件中包含另一个组件的方式是这样的

组件的前n个顶部

import PaisForm from './PaisForm' //path to file

然后在组件中

// your code
<div>
    // use your component
    <PaisForm />
</div>

还要确保您在PaisForm组件中

export default PaisForm

希望这可以帮助。

通过读取来反应加载页面

问题描述

2 个解决方案

解决方案1
1 2019-08-14 18:14:35

解决方案2
1 已采纳 2019-08-14 18:14:44

通过读取来反应加载页面

问题描述

2 个解决方案

解决方案1 1 2019-08-14 18:14:35

解决方案2 1 已采纳 2019-08-14 18:14:44

解决方案1
1 2019-08-14 18:14:35

解决方案2
1 已采纳 2019-08-14 18:14:44