Script and link tags inside ReactJS component?


#1

Trying to add the following into my React component from


<script src='js/addons/mg_line_brushing.js'></script>
<link rel='stylesheet' href='css/addons/mg_line_brushing.css' />

d3.json('data/fake_users2.json', function(data) {
    for (var i = 0; i < data.length; i++) {
        data[i] = MG.convert.date(data[i], 'date');
    }

    MG.data_graphic({
        title: "Brushing Addon by Dan De Havilland",
        description: "Drag the crosshair over the chart to zoom. For further details about this addon, take a look at its GitHub repo.",
        data: data,
        top: 70,
        width: 600,
        height: 240,
        right: 40,
        missing_is_hidden: true,
        target: '#brushing'
    });
});

where my React component class Dashboard.js:

import React from 'react';
import DocumentTitle from 'react-document-title';

export default class DashboardPage extends React.Component {
    render() {

        return (
            <DocumentTitle title={'Dashboard'}>
                <div className="container">
                    <div className="row">
                        <div className="col-xs-12">
                            <h3>Dashboard for data visualization</h3>
                            <hr />
                        </div>
                    </div>
                </div>

            </DocumentTitle>
    );

    }
    }

Resulting in
This is my Dashboard component page:

"use strict";
import { Link } from 'react-router';
import React,  { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import Header from './Header';
import { LoginLink } from 'react-stormpath';
import DocumentTitle from 'react-document-title';
var d3 = require("d3");
var Chart = require('react-d3-core').Chart;
var LineChart = require('react-d3-basic').LineChart;

 
export default class DashboardPage extends React.Component {

    componentDidMount() {

        const jsCode = `
          src="../../bower_components/mg-line-brushing/dist/mg_line_brushing.js";          
        `;
        new Function(jsCode)();

        {/*<link rel="stylesheet" href="../../bower_components/mg-line-brushing/dist/mg_line_brushing.css">*/}

         d3.json('../../../data/fake_users2.json', function (data) {
            for (var i = 0;i < data.length; i++) {
                data[i] = MG.convert.date(data[i], 'date');
            }

            MG.data_graphic({
                title: "30 min energy data by SebastianC",
                description: "Drag the crosshair over the chart to zoom. For further details about this addon, take a look at its GitHub repo.",
                data: data,
                top: 70,
                width: 600,
                height: 240,
                right: 40,
                missing_is_hidden: true,
                target: 'brushing'
            });
        });
    }


    render() {

        return (

            <DocumentTitle title={'Dashboard'}>
                <div className="container">
                    <div className="row">
                        <div className="col-xs-12">
                            <h3>Dashboard for data visualization</h3>
                            <hr />
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-xs-12">

                            <div id="chartdiv"></div>
                            <h1>Hello</h1>


                        </div>
                    </div>
                </div>
            </DocumentTitle>
        );

    }
}

Or we need https://egghead.io/lessons/react-using-react-s-jsx-to-dangerouslysetinnerhtml

Uncaught TypeError: Cannot read property ‘length’ of null