2016-02-13 94 views
0

我目前正在使用material-ui库,它使用reactjs和谷歌的材料设计,可以在这里找到http://www.material-ui.com/#/我试过他们的github页面上没有工作的他们的例子之一。我现在试着做一个简单的测试,看看它是否会按照这个帖子React JS not rendering渲染。然而,我的运气没有改变,它不会呈现。ReactJS not rendering php codeigniter

这里是我的反应代码:

import React from 'libraries/react'; 
import RaisedButton from 'libraries/material-ui/lib/raised-button'; 
import ReactDOM from 'libraries/react-dom'; 

var HelloMessage = React.createClass({ 
    render: function() { 
     return <h1>Hello {this.props.message}! </h1>; 
    } 
}); 

React.render(HelloMessage, message="World" , document.getElementById('body')); 

,这里是我的HTML:

<?php 
defined('BASEPATH') OR exit('No direct script access allowed'); 
?><!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Welcome to CodeIgniter</title> 

    <style type="text/css"> 

     ::selection { background-color: #E13300; color: white; } 
     ::-moz-selection { background-color: #E13300; color: white; } 

     body { 
      background-color: #fff; 
      margin: 40px; 
      font: 13px/20px normal Helvetica, Arial, sans-serif; 
      color: #4F5155; 
     } 

     a { 
      color: #003399; 
      background-color: transparent; 
      font-weight: normal; 
     } 

     h1 { 
      color: #444; 
      background-color: transparent; 
      border-bottom: 1px solid #D0D0D0; 
      font-size: 19px; 
      font-weight: normal; 
      margin: 0 0 14px 0; 
      padding: 14px 15px 10px 15px; 
     } 

     code { 
      font-family: Consolas, Monaco, Courier New, Courier, monospace; 
      font-size: 12px; 
      background-color: #f9f9f9; 
      border: 1px solid #D0D0D0; 
      color: #002166; 
      display: block; 
      margin: 14px 0 14px 0; 
      padding: 12px 10px 12px 10px; 
     } 

     #body { 
      margin: 0 15px 0 15px; 
     } 

     p.footer { 
      text-align: right; 
      font-size: 11px; 
      border-top: 1px solid #D0D0D0; 
      line-height: 32px; 
      padding: 0 10px 0 10px; 
      margin: 20px 0 0 0; 
     } 

     #container { 
      margin: 10px; 
      border: 1px solid #D0D0D0; 
      box-shadow: 0 0 8px #D0D0D0; 
     } 
    </style> 
</head> 
<body> 

<div id="container"> 
    <h1>Welcome to CodeIgniter!</h1> 

    <div id="body"> 

    </div> 

    <p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds. <?php echo (ENVIRONMENT === 'development') ? 'CodeIgniter Version <strong>' . CI_VERSION . '</strong>' : '' ?></p> 
</div> 
</body> 
<script type="text/jsx" src="application/scripts/reactTest.js"></script> 
</html> 
+0

尝试'ReactDOM.render(,document.getElementById('body'))' – azium

+0

@azium我已经尝试过,但它确实呈现任何东西 – Johnathon64

+0

并没有错误s在浏览器控制台中? – azium

回答

0

尝试

React.render(<HelloMessage message="World"/>, document.body); 
+0

上的脚本选项卡我什么也没有得到 – Johnathon64

+0

和ReactDOM .render而不是React.render? – rmpt

+0

我也什么也没得到 – Johnathon64