React 中的 JS 渲染

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 组件的生命周期）：

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

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