2015-12-28 2 views
0

Я работаю над обработкой на стороне сервера, и я получаю ошибку внизу этого сообщения. Некоторые контекст:реагировать на повторное использование ошибки разметки

У меня есть 2 реагируют компоненты, каждый в своей папке:

- 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; 

второго компонента

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; 

Я использую browserify создать файл build.js, я бегу сборки с npm run build команды и обновления пути в зависимости от того, какой компонент я хочу сделать на стороне сервера (для тестирования)

"build": "browserify -t reactify react-components/cg-story-box/cg-story.js 
-o ./public/javascripts/bundle.js" 

и по какой-то причине, когда я пытаюсь отобразить один компонент, он работает, но когда я пытаюсь сделать второй, он не дает и дает мне эту ошибку.

короткий вопрос: почему?

Предупреждение: Реагирование попыталось повторно использовать разметку в контейнере, но контрольная сумма была недействительной. Обычно это означает, что вы используете рендеринг сервера, а разметка, сгенерированная на сервере, не была тем, чего ожидал клиент. React вводит новую разметку для компенсации того, что работает, но вы потеряли многие преимущества рендеринга сервера. Вместо этого, выяснить, почему разметка генерируется отличается от клиента или сервера:


еще одна вещь, чтобы отметить:

, когда я пытаюсь сделать второй компонент, реагируют буквально создает элемент cgStoryBox вместо html в методе рендеринга компонента, но с первым компонентом он отображает правильный html. что случилось с этим

ответ

-1

Невероятно ... это потому, что имя компонента не было капитализировано ... В основном все компоненты должны иметь первые буквы капитала (это означает также вложенные компоненты).

Я сохраню это здесь, если у кого-то еще такая же проблема

Смежные вопросы