React 中的 JS 渲染

Question

我有 javascript - 网络爬虫。我将它添加到我的 ReactJS 应用程序中的组件文件夹中。我正在尝试将其渲染到网页中。

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

如何将此网络抓取工具 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

你上面的函数只是获取数据，如果你想在react页面上显示数据，你将不得不使用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>
        );
    }
}

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

React 中的 JS 渲染

JS Rendering within React

javascript

web-scraping

reactjs

nightmare