Javascript React中的JS呈现

我有javascript-webscraper。我在我的ReactJS应用程序的组件文件夹中添加了这个。我正在尝试将其呈现到网页中

我在其他组件中使用了JSX组件来渲染它

如何将此webscraper javascript的输出输入到网页中。 我知道console.log（）语句必须更改，但我不知道如何继续

---

---

上面的函数只是获取数据，如果要在react页面上显示数据，则必须使用

this.setState（）

，页面将被重新呈现

我假设上述功能运行良好，那么您可以使用如下内容：（根据React组件的生命周期）：

从“React”导入React；
从“噩梦”中导入噩梦；
导出默认类MyClass扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
从刮除的结果：“”，
}
}
组件willmount（）{
var monamine=monamine（{show:false}）；
噩梦
后藤先生（'http://javascriptissexy.com/16-javascript-concepts-you-must-know-well/')
//.wait（“#条目内容”）
.评估（功能）{
var ht=document.querySelector（'li'）；
//返回ht[0]；
//返回值（ht.split（/\r\n |\r |\n/）.length）；
//check=document.queryselectoral（'#bodyblock>ul>li'）。长度；
//退货检查；
//var ht1=document.queryselectoral（'#bodyblock>ul>li'）.innerText[5]；
//返回ht1；
返回ht；
})
(完)
.then（（result）=>{//这里我们使用词法绑定，将这个回调函数绑定到当前的react组件
控制台日志（结果）；
这是我的国家({
resultFromScraping:JSON.stringify（result），//这只是一个示例，您可以在这里对结果执行任何操作
});
})
.catch（函数（错误）{
console.log（'搜索失败：'，错误）；
}); 
}
render（）{
返回(
{this.state.resultFromScraping}
);
}
}

---

如果您有任何错误，请在这里发布，然后我们可以找到解决方案，谢谢^ ^

可能会执行

this.setState

，并在网页中呈现该变量，非常感谢您花时间写下代码。因为我是初学者，这真的很有帮助。我现在要试试这个。老兄！！你太棒了！！我有一个问题，取而代之的是“导出默认类MyClass扩展React.Component”，我可以使用var webScrape=React.createClass吗？2） 我可以用var代替import吗？你干掉这家伙有什么特别的原因吗？自从AM学习以来，我试图让它成为我的阅读水平。是的，你可以使用“Real.CudiCasCases”，但是我建议你使用ES6语法（就像我的代码，ES6是现代的，很棒的^ ^）。你可以在这里参考ES6的教程：如果你觉得这真的很有帮助，请考虑一个UP投票，谢谢^ ^我希望，但我没有足够的声誉。谢谢你。

var Nightmare = require('nightmare');
var nightmare = Nightmare({ show: false})

nightmare
  .goto('http://javascriptissexy.com/16-javascript-concepts-you-must-know-well/')

  //.wait('#entry-content')
  .evaluate(function () {
    var ht = document.querySelector('li');
    //return ht[0];
    //return (ht.split(/\r\n|\r|\n/).length);
    //check = document.querySelectorAll('#bodyblock > ul >li').length;
    //return check;
    //var ht1 = document.querySelectorAll('#bodyblock > ul > li ').innerText[5];
    //return ht1;
    return ht;


  })
  .end()
  .then(function (result) {
    console.log(result)
  })
  .catch(function (error) {
    console.log('Search failed:', error);
  });

import React from 'react';
import Nightmare from 'nightmare';

export default class MyClass extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            resultFromScraping: '',
        }
    }

    componentWillMount() {
        var nightmare = Nightmare({ show: false});

        nightmare
            .goto('http://javascriptissexy.com/16-javascript-concepts-you-must-know-well/')

            //.wait('#entry-content')
            .evaluate(function () {
                var ht = document.querySelector('li');
                //return ht[0];
                //return (ht.split(/\r\n|\r|\n/).length);
                //check = document.querySelectorAll('#bodyblock > ul >li').length;
                //return check;
                //var ht1 = document.querySelectorAll('#bodyblock > ul > li ').innerText[5];
                //return ht1;
                return ht;


            })
            .end()
            .then( (result) => { //here we use lexical binding, to bind this callback function to the current react component
                console.log(result);
                this.setState({
                    resultFromScraping: JSON.stringify(result), //this is just an example, you can do whatever you want with the result here
                });

            })
            .catch(function (error) {
                console.log('Search failed:', error);
            }); 
    }

    render() {
        return (
            <div>{this.state.resultFromScraping}</div>
        );
    }
}