ReactDOM.hydrate () перерисовывается при подключении к DOM - PullRequest
Новая
       21

ReactDOM.hydrate () перерисовывается при подключении к DOM

0 голосов
/ 19 июня 2019

Когда я увлажняю уже компонент, он перерисовывается.Проблема в том, что нет государства.Итак, куски кода, зависящие от состояния, перерисовываются и, следовательно, ломаются.

Я использую renderToString на сервере для обслуживания файла HTML, который обслуживает bundle.js, который увлажняет корневой узел.Прежде чем выполнить renderToString, я извлекаю данные из базы данных и передаю их компоненту, который отображается в строку.

Из файла сервера.Используя экспресс 

// ...
app.get('*', (req, res) => {
  fs.readFile('./public/index.html', 'utf-8', (err, file) => {
    if(err) {
      res.status(400).send(err);
    }
    database.getReviews(1234, (err, data) => {
      if (err) {
        res.status(400).json({message: err});
        return;
      }
      const html = renderer(file, data);
      res.send(html);
    });
  });
});
// ...

Модуль с функцией рендеринга 

import React from "react";
import ReactDOM from "react-dom/server";
import App from "../client/components/App.jsx";

export default function renderer(html, data) {
  const serverHtml = ReactDOM.renderToString(<App data={data} />);
  const regex = /(<div id="reviews">)(<\/div>)/;
  html = html.replace(regex, function(original, div1, div2) {
      return div1 + serverHtml + div2;
  });
  return html;
}

Индексный файл с функцией гидрата 

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';

ReactDOM.hydrate(<App />, document.getElementById('reviews'));

App.js, это устаревший код, который у меня естьунаследовано 

import React from 'react';
import Reviews from './reviews';
import ReviewModal from './reviewModal';
import styled from 'styled-components';

const ModalProp = styled.div`
  &&& {
    opacity: ${props => props.isModalShowing ? "0.5" : "1.0"};
  }
`;

class App extends React.Component {
  static formatDate(date) {
    // ...
  }

  constructor(props) {
    super(props);
    this.state = {
      reviews: this.props.data,
      isModalShowing: false,
      isModalSelected: false
    };

    this.toggleModal = this.toggleModal.bind(this);
    this.selectModal = this.selectModal.bind(this);
  }
  componentWillMount(){
    console.log(this.props)
    // debugger;
  }

  toggleModal() {
    this.setState({
      isModalShowing: !this.state.isModalShowing,
      isModalSelected: false
    });
  }

  selectModal() {
    this.setState({
      isModalSelected: true
    });
  }

  render() {
    return (
      <div className="Reviews">
        <div id="rApp">
          <div className="rBodyContainer">
            <div className="rModalContainer">
              <ReviewModal 
                id="modal"
                isModalShowing={this.state.isModalShowing}
                isModalSelected={this.state.isModalSelected}
                selectModal={this.selectModal}
                toggleModal={this.toggleModal}
                reviews={this.state.reviews}
                formatDate={App.formatDate}
              />
            </div>
            <div
              className="rPageContainer"
              onClick={this.toggleModal}
            >
              <ModalProp isModalShowing={this.state.isModalShowing}>
                <hr />
                <div className="rPaddingTop">
                  <h1 className="rReviewTitle">Reviews</h1>
                  <Reviews
                    isModalShowing={this.state.isModalShowing}
                    toggleModal={this.toggleModal}
                    reviews={this.state.reviews}
                    formatDate={App.formatDate}
                  />
                  <div className="rModalButtonContainer">
                    <a
                      className="rMoreReviews"
                      id="moreReviews"
                      style={{ 'color': '#914669' }}
                      onClick={this.toggleModal}
                    >
                      Read all {this.state.reviews.length} reviews
                    </a>
                  </div>
                </div>
              </ModalProp>
            </div>
            <hr />
          </div>
        </div>
      </div>
    );
  }
}

export default App;

Я ожидаю, что гидрат присоединит прослушиватели событий, которые обновят состояния 'isModalShowing' и 'isModalSelected', что приведет к повторной визуализации модального

...