Fatal编程技术网
  • javascript/
  • Javascript 从index.html访问组件

Javascript 从index.html访问组件

javascript reactjs

Javascript 从index.html访问组件,javascript,reactjs,Javascript,Reactjs,这似乎很容易，但我完全糊涂了 我开发了react应用程序，带有组件。现在，在我的index.html中，我有一个工作示例： <div class="container"> <div id="app-content"> <!-- React will render in div#app-content, works fine! --> <script src="build/main

这似乎很容易，但我完全糊涂了

我开发了react应用程序，带有组件。现在，在我的index.html中，我有一个工作示例：

 <div class="container">
        <div id="app-content">

        <!-- React will render in div#app-content, works fine! -->
                    <script src="build/main.bundle.js"></script>        </div>  </div>
main.jsx：

var React=require（'React'）；
var-App=require（'./组件/App'）；
if（文档类型！=“未定义”）
{
React.render（，document.getElementById（“应用程序内容”）；
}
App.jsx：

var React=require（'React'）；
var LineChart=需要（“./LineChart”）；
var HelloWorld=require（'./HelloWorld'）；
var chartOptions={响应：true}；
变量数据库={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[
{
标签：“我的第一个数据集”，
填充颜色：“rgba（220220,0.5）”，
strokeColor:“rgba（2200,0.8）”，
高光填充：“rgba（2200,0.75）”，
强光笔划：“rgba（2201）”，
数据：[65,59,80,81,56,55,40]
},
{
标签：“我的第二个数据集”，
填充颜色：“rgba（151187205,0.5）”，
strokeColor：“rgba（151187205,0.8）”，
高光填充：“rgba（151187205,0.75）”，
强光笔划：“rgba（151187205,1）”，
数据：[28,48,40,19,86,27,90]
}
]
};
var数据线={
标签：[“Viens”、“Divi”、“Tris”、“Cetri”、“Pieci”、“Sesi”、“Septini”]，
数据集：[
{
标签：“我的第一个数据集”，
数据：[65,59,80,81,56,55,40,88]
},
{
标签：“我的第二个数据集”，
数据：[28,48,40,19,86,27,90,98]
}
]
};
var dataLine2={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[
{
标签：“我的第一个数据集”，
数据：[11,15,20,25,30,40,70]
},
{
标签：“我的第二个数据集”，
数据：[80,50,49,10,20,35,55,44]
},
{
标签：“我的第三个数据集”，
数据：[102,50,80,65,25,80,90]
},
{
标签：“我的4个数据集”，
数据：[150,50,50,50,50,70,89]
},
{
标签：“我的5个数据集”，
数据：[80,20,50,78,65,45100]
},
{
标签：“我的6数据集”，
数据：[100,90,80,70,60,50,40]
},
{
标签：“我的7数据集”，
数据：[55,66,77,88,99100,44]
},
]
};
风险值数据={
起始日期：“2015年1月13日”，
截止日期：2015年4月30日，
标题：“LineChartDemo”，
图表数据：数据线
};
变量数据2={
起始日期：“2015年1月13日”，
截止日期：2015年4月30日，
标题：“LineChartDemo”，
图表数据：数据线2
};
var App=React.createClass({
render:function（）{
返回(
);
}
});
module.exports=App；
我是这样实施的：

在index.html文件中，我使用带有初始状态属性的div，请参见：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>React WebPack Barebones Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/app-custom.css">
    <link rel="stylesheet" href="css/daterangepicker-bs3.css" type="text/css" />
    <script src="build/main.bundle.js"></script>
</head>
<body>
 <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">React + CharJs</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <form class="navbar-form navbar-right">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">Sign in</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </nav>

    <div class="jumbotron">
      <div class="container">
        <h1>Hello React + ChartJs!</h1>
        <p>For more details, basic setup, usage, implementations see Github project</p>
        <p><a class="btn btn-primary btn-lg" href="https://github.com/rolandsusans/reactjs_chartjs" role="button">Get me to source &raquo;</a></p>
      </div>
    </div>

  <div class="container">
    <div class="ReactApp" type="LineChart" ajaxUrl="urlAjax1" excel="link1"pdf="link2"  minDate="02/02/2014" maxDate=""> </div>
    <div class="ReactApp" type="BarChart" excel="link3" pdf="link4" ajax="urlAjax2"></div> 
    <div class="ReactApp" type="BarChart" excel="link3" pdf="link4" ajax="urlAjax2"></div> 
  </div>

</body>


React Web包裸体示例
切换导航
登录
你好，React+ChartJs！
有关基本设置、用法和实现的更多详细信息，请参阅Github项目
问题是在加载顺序中出现的，之前已经加载了React，因此我在我的main.jsx中实现了以下内容

    var React = require('react');
var App = require('./components/App');

function run() {
  // get all divs where Graphs should be rendered
  var targets = document.getElementsByClassName('ReactApp');

  for (var i = 0; i < targets.length; i++) {
     //actually call app render the graph with  
     React.render(<App />, targets[i]);
  };
}
if (window.addEventListener) {
  window.addEventListener('DOMContentLoaded', run);
} else {
  window.attachEvent('onload', run);
}

var React=require（'React'）；
var-App=require（'./组件/App'）；
函数运行（）{
//获取应渲染图形的所有div
var targets=document.getElementsByClassName（'ReactApp'）；
对于（变量i=0；i
结果一切正常！应用程序按照我之前的要求呈现多个div。

我也有类似的问题。我通过从网页包中排除react来修复它。相反，从脚本标签引用它。

我不明白你想做什么。为什么你想在DOM的中间执行脚本？@ WiReDrALE，现在我有基于MVC原理的项目（我有框架YI1.1.15），所以我想在现有视图中实现反作用组件。您不需要使用内联脚本来执行此操作。当我从index.html调用React.render
//如何调用App component进行渲染//在div中#components from here
i get
React未定义
，我已经包含了Webpack生成的main.bundle.js。您确定捆绑包中包含React吗？检查文件。它看起来要么没有，要么您试图在下载之前使用React。 
    var React = require('react');
    var App = require('./components/App');

    if(typeof document !== "undefined")
    {
       React.render(<App />, document.getElementById("app-content"));
    }

var React = require('react');
var LineChart = require('./LineChart');
var HelloWorld = require('./HelloWorld');

var chartOptions = { responsive: true };


var dataBar = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};
var dataLine = {
    labels: ["Viens", "Divi", "Tris", "Cetri", "Pieci", "Sesi", "Septini"],
    datasets: [
        {
            label: "My First dataset",
            data: [65, 59, 80, 81, 56, 55, 40, 88]
        },
        {
            label: "My Second dataset",
            data: [28, 48, 40, 19, 86, 27, 90, 98]
        }
    ]
};

var dataLine2 = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            data: [11, 15, 20, 25, 30, 40,70]
        },
        {
            label: "My Second dataset",
            data: [80, 50, 49, 10, 20, 35, 55, 44]
        },
        {
            label: "My Third dataset",
            data: [102, 50, 80, 65, 25,80, 90]
        },
        {
            label: "My 4 dataset",
            data: [150, 50, 50, 50, 50, 70, 89]
        },
        {
            label: "My 5 dataset",
            data: [80, 20, 50, 78, 65, 45, 100]
        },
        {
            label: "My 6 dataset",
            data: [100, 90, 80, 70, 60, 50, 40]
        },
        {
            label: "My 7 dataset",
            data: [55,66,77,88,99,100,44]
        },
    ]
};

var data = {
    startDate: "13/01/2015",
    endDate: "30/04/2015",
    title: 'LineChartDemo',
    chartData: dataLine
};

var data2 = {
    startDate: "13/01/2015",
    endDate: "30/04/2015",
    title: 'LineChartDemo',
    chartData: dataLine2
};

var App = React.createClass({
    render: function(){
        return (
            <div id="app">
                <HelloWorld name="Rolands Usāns" />
                <LineChart data={data} imageExport={['png, jpeg']}/>
                <LineChart data={data2} imageExport={['png, jpeg']}/>

            </div>
        );
    }
});


module.exports = App;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>React WebPack Barebones Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/app-custom.css">
    <link rel="stylesheet" href="css/daterangepicker-bs3.css" type="text/css" />
    <script src="build/main.bundle.js"></script>
</head>
<body>
 <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">React + CharJs</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <form class="navbar-form navbar-right">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">Sign in</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </nav>

    <div class="jumbotron">
      <div class="container">
        <h1>Hello React + ChartJs!</h1>
        <p>For more details, basic setup, usage, implementations see Github project</p>
        <p><a class="btn btn-primary btn-lg" href="https://github.com/rolandsusans/reactjs_chartjs" role="button">Get me to source &raquo;</a></p>
      </div>
    </div>

  <div class="container">
    <div class="ReactApp" type="LineChart" ajaxUrl="urlAjax1" excel="link1"pdf="link2"  minDate="02/02/2014" maxDate=""> </div>
    <div class="ReactApp" type="BarChart" excel="link3" pdf="link4" ajax="urlAjax2"></div> 
    <div class="ReactApp" type="BarChart" excel="link3" pdf="link4" ajax="urlAjax2"></div> 
  </div>

</body>

    var React = require('react');
var App = require('./components/App');

function run() {
  // get all divs where Graphs should be rendered
  var targets = document.getElementsByClassName('ReactApp');

  for (var i = 0; i < targets.length; i++) {
     //actually call app render the graph with  
     React.render(<App />, targets[i]);
  };
}
if (window.addEventListener) {
  window.addEventListener('DOMContentLoaded', run);
} else {
  window.attachEvent('onload', run);
}