Question

这来自我的问题：Changing style on <body> element其中的建议是设置顶级DIV。经过尝试，我发现使用React与直接HTML相比，我获得了不同的输出。我无法理解为什么。

考虑一个非常简单的反应应用程序，它包含一个基本的index.html文件：

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            html { min-height: 100%; }
            body { height: 100%; background-color: blue; margin: 0; }
        </style>
    </head>
    <body>
        <div id='root'></div>
        <script src="https://fb . me / react-15.0.1.js"></script>
        <script src="https://fb . me / react-dom-15.0.1.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
        <script src="main.js" type="text/babel"></script>
    </body>
</html>

和相应的main.js文件

var TestDiv = React.createClass({
    render: function () {
        const style = {
            divStyle: {
                height: "100%",
                background: "red"
            }
        }
        return (
            <div style={style.divStyle}>
                <h1>Hello World</h1>
            </div>
        )
    }
});

ReactDOM.render(<TestDiv/>, document.getElementById('root'));

渲染它会产生一个蓝色屏幕，顶部有一个红色条，文字打开。将DIV设置为100％的高度我预计红色背景将填充视口。

现在，从该React应用程序（由Chrome Inspector提供）输出并从中创建一个简单的html文件。

<html>
    <head>
        <style>
            html { min-height: 100%; }
            body { height: 100%; background-color: blue; margin: 0; }
        </style>
    </head>
    <body>
        <div id="root">
            <div data-reactroot="" style="height: 100%; background: red;">
                <h1>Hello World</h1>
            </div>
        </div>
        <script src="https://fb . me/react-15.0.1.js"></script>
        <script src="https://fb . me/react-dom-15.0.1.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
        <script src="main.js" type="text/babel"></script>
    </body>
</html>

代码基本相同，但这会呈现整个视口为红色而根本没有蓝色。

为什么？

ReactJS vs HTML - 不同的渲染

0 个答案: