Рендеринг одного компонента несколько раз на разных html страницах с разным текстом - PullRequest
Новая
       10

Рендеринг одного компонента несколько раз на разных html страницах с разным текстом

0 голосов
/ 21 мая 2019

Я новичок, чтобы отреагировать, и я пытаюсь отобразить один компонент в разных HTML-файлах (потому что я работаю в существующем проекте), каждый из которых отличается текстом. Я думаю о чем-то вроде этого: 

class ctaSection extends React.Component{

   render(){
       return(
           <div className="cta-section">
           <div className="md:w-9c">
               <h5 className="uppercase">{this.props.h5}</h5>
               <h3>{this.props.h3}</h3>
           </div>
           <div className="cta-button">
               <a href="#">
                   <button className="w-full">{this.props.button}</button>
               </a>
           </div>
       </div>
       );
   }

}

export default ctaSection;

Затем в моем index.js я рендерил вот так, передавая реквизиты: 

let ctaPage1 = document.getElementById('cta-section-page-1');
let ctaPage2 = document.getElementById('cta-section-page-2');
ReactDOM.render(<CtaSection h3='my text for page 1' h5='my h5 for page 1' button='hello'/>, ctaPage1);
 ReactDOM.render(<CtaSection h3='text for page 2' h5='something' button='click me'/>, ctaPage2);

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

Uncaught Invariant Violation: Target container is not a DOM element.

Это прекрасно работает, если я рендерил компонент один раз, но не для нескольких экземпляров. Каков наилучший способ сделать это?

1 Ответ

0 голосов
/ 21 мая 2019

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

У меня будет 1 файл JS на страницу HTML, которая импортирует CtaSection , каждый из этих файлов будет выглядеть так: 

// page1.js
import CtaSection from '../CtaSection'; // or wherever it is

let ctaPage = document.getElementById('cta-section-page');
ReactDOM.render(<CtaSection h3='my text for page 1' h5='my h5 for page 1' button='hello'/>, ctaPage);

Вам просто нужно убедиться, что каждая html-страница использует соответствующий файл JS. 

// page1.html 
<body>
    <div id="cta-section-page"></div>
    <script src="page1.js"></script>
</body>

Повторите для каждой страницы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...