Question

我正在使用反应服务器端渲染，并且我在此帖子的底部收到错误。一些背景：

我有2个反应组件，每个组件都在自己的文件夹中：

MethodInfo

两种反应组分都相同（主要是）：

第一个组件

 - react-components
   - component-1-folder
     - component-1
   - component-2-folder
     - component-2

第二部分

var React = require('react');
var ReactDom = require('react-dom');

var Component = React.createClass({
    render: function() {
        return (
            <div>
                <div className='story-box'>
                    test cg story
                </div>
                <script src="/javascripts/bundle.js"></script>
            </div>      
        );
    }
});

if(typeof window !== 'undefined') {
  window.onload = function() {
    ReactDom.render(<Component/>, document.getElementById('react-test-component-box'));
  }
}

module.exports = Component;

我使用browserify创建build.js文件，我使用var React = require('react'); var ReactDom = require('react-dom'); var cgStoryBox = React.createClass({ render: function() { return ( <div> <div className='story-box'> hi </div> <script src="/javascripts/bundle.js"></script> </div> ); } }); if(typeof window !== 'undefined') { window.onload = function() { ReactDom.render(<cgStoryBox/>, document.getElementById('react-test-component-box')); } } module.exports = cgStoryBox;命令运行构建并根据我想要呈现服务器端的组件更新路径（用于测试））

npm run build

由于某种原因，当我尝试渲染一个组件时，它可以正常工作，但是当我尝试渲染第二个组件时，它并没有给我这个错误。

简短的问题：为什么？

警告：React尝试在容器中重用标记，但校验和无效。这通常意味着您正在使用服务器呈现，并且在服务器上生成的标记不是客户端所期望的。 React注入了新的标记以补偿哪些有效但你已经失去了服务器渲染的许多好处。相反，弄清楚为什么生成的标记在客户端或服务器上是不同的：

另外需要注意的是：

当我尝试渲染第二个组件时，在字面上创建一个元素"build": "browserify -t reactify react-components/cg-story-box/cg-story.js -o ./public/javascripts/bundle.js"而不是组件的render方法中的html，但是使用第一个组件它会呈现正确的html。与此相关的是什么

Answer 1

令人难以置信......这是因为组件名称没有大写......基本上所有组件都必须有大写首字母（这也意味着嵌套组件）。

如果其他人有同样的问题我会留在这里

反应尝试重用标记错误

1 个答案: