reactjs代码未显示在浏览器中

Question

感谢fr的出色工作。 我是react.js的新手，但技能有些局限。 我正在尝试创建一个带有页眉，主页面和页脚的基本页面。 我编写了代码，控制台未返回任何错误，但浏览器未显示任何内容。 这是代码：

JS

const Header = ({title}) => (<header>{title}</header>);
const Main = ({title}) => (<main>{title}</main>);
const Footer = ({title}) => (<footer>{title}</footer>);

class App extends React.Component {
    render() {
        const {header,main,footer} = this.props;
        return (
            <div className="app">
                <Header title={header} />
                <Main title={main} />
                <Footer title={footer}/>
            </div>
        );
    }
};

ReactDOM.render(
    <App
        header="I am the header"
        main="I am the main"
        footer="I am the footer" />,
    document.getElementById('react')
);




export default App;

HTML

<body>


  <div id="react"></div>


  </body>

控制台返回：

Compiled successfully!

You can now view wp in the browser.

  http://localhost:38867/

Note that the development build is not optimized.
To create a production build, use npm run build.

我得到了这个：

我做错了什么？ 此处查看代码https://codepen.io/anon/pen/mmaxvj

编辑：我忘了添加index.js。 我对其进行了编辑并更改了ReactDOM.render (<App />, document.getElementById('root')); />，document.getElementById（'root (<App />, document.getElementById('root')); 到ReactDOM.render(<App />, document.getElementById('react'));

现在我有一个空白页显示，浏览器上没有更多错误...有什么想法吗？

Answer 1

尝试在</body>标记之前添加以下代码：

<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>

检查是否还需要jquery.js或任何其他javascript软件包。

我在React doc页面上看到，它们提供了指向CodePen“ Hello World” React页面的链接-您也可以将其用作种子模板： http://codepen.io/gaearon/pen/ZpvBNJ?editors=0010 ://codepen.io/gaearon/pen/ZpvBNJ?editors=0010

这来自页面https://facebook.github.io/react/docs/hello-world.html

Answer 2

您提供的代码有效。 但是，您包含在问题中的屏幕截图显示了document.getElementById('root')行，该行不属于您的代码-您可能需要重新构建代码或确保您的开发服务器（例如webpack）正在运行正确的源目录。

还要检查有关react <script>标记位置的以下答案： https : //stackoverflow.com/a/26416407/1647737

 const Header = ({title}) => (<header>{title}</header>); const Main = ({title}) => (<main>{title}</main>); const Footer = ({title}) => (<footer>{title}</footer>); class App extends React.Component { render() { const {header,main,footer} = this.props; return ( <div className="app"> <Header title={header} /> <Main title={main} /> <Footer title={footer}/> </div> ); } }; ReactDOM.render( <App header="I am the header" main="I am the main" footer="I am the footer" />, document.getElementById('react') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="react"></div>

reactjs代码未显示在浏览器中

问题描述

2 个解决方案

解决方案1
0 2017-05-23 02:36:53

解决方案2
0 2017-05-23 02:39:24

reactjs代码未显示在浏览器中

问题描述

2 个解决方案

解决方案1 0 2017-05-23 02:36:53

解决方案2 0 2017-05-23 02:39:24

解决方案1
0 2017-05-23 02:36:53

解决方案2
0 2017-05-23 02:39:24