Question

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

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

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

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

Answer 1

上面的函数只获取数据，然后如果要在反应页面上显示数据，则必须使用this.setState()并重新呈现页面。

我认为上面的函数效果很好，那么你可以使用这样的东西:(根据React Component的生命周期）：

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

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

在React

1 个答案: