Блог

Главная - Вопросы по программированию - Преактировать компонент рендеринга в указанный div

Преактировать компонент рендеринга в указанный div

#javascript #preact

#javascript #преактировать

Вопрос:

Поскольку приложение preact, созданное из preact cli, не поставляется ни с одним index.html , рендеринг каждого компонента будет добавляться к тегу body, но я хочу отобразить компонент в указанном div. Например, вот мой component/app.js 

 import { h, Component } from 'preact';
import { Router } from 'preact-router';
import 'bootstrap/dist/css/bootstrap.min.css';

import Header from './header';

// Code-splitting is automated for routes
import Home from '../routes/home';
import Profile from '../routes/profile';
import Github from '../routes/github';
import List from '../routes/list';

export default class App extends Component {

    /** Gets fired when the route changes.
     *  @param {Object} event       "change" event from [preact-router](http://git.io/preact-router)
     *  @param {string} event.url   The newly routed URL
     */
    handleRoute = e => {
        this.currentUrl = e.url;
    };

    render() {
        return (
            <div id="app">
                <Header />
                <Router onChange={this.handleRoute}>
                    <Home path="/" />
                    <Profile path="/profile/" user="me" />
                    <Profile path="/profile/:user" />
                    <Github path="/github" />
                    <List path="/list" />
                </Router>
            </div>
        );
    }
}

и это мой index.js в routes/list 

 import { h, Component } from 'preact';
import axios from 'axios';

export default class List extends Component {
  state = {
      data : []
    };
  fetchUser = () => {
      axios.get(`https://api.dev.xxx`)
      .then(response =>{
       const data = response.data.data;
       this.setState({data: data})
      });
  }
  setUsername = e => {
      this.setState({ username: e.target.value });
      this.fetchUser();
  }
  componentDidMount() {
      this.fetchUser();
  }
  render({}, {data}) {
      return (
        <div class="container">
          <h1>Listnya</h1>
          {
              data.map(d=>(
                <div class="card">
                    <p>{d.id}</p>
                    <p>{d.name}</p>
                </div>
              ))
          }
        </div>
      );
   }
}

как мы можем видеть в приведенном выше коде, это <div class="container"> будет добавлено к телу, но я хочу рендерить карту внутри предварительно указанного контейнера div. Как это делается?

Комментарии:

1. Какую версию preact вы используете? Кроме того, вы пытаетесь поместить его в div, которого нет в вашей текущей структуре DOM?

2. Идея Preact / React заключается в том, чтобы разместить в нем весь сайт — в этом случае вы просто импортируете компонент и используете его внутри другого компонента. Если нет, вам нужно сделать отдельное приложение и только в вашем app.js / index.js / main.js или, как бы вы это ни называли, отобразите свое второе приложение в желаемом div. Смотрите документы preactjs.com/guide/getting-started#rendering-jsx просто сделайте это для своего компонента.

3. @pmkro предварительный рендеринг cli 2.2.1. Да, поскольку у нас нет HTML-файла для хранения шаблона

4. @MatiusNugrohoAryanto если вся страница предварительно обработана, просто заполните остальное и поместите его туда, где вы хотите. preact-cli предполагает, что вы создаете весь сайт с помощью preact

5. @pmkro можете ли вы предоставить пример кода?

Ответ №1:

Если вы согласны с использованием release candidate, вы можете перейти на версию 3.0: (которая имеет template.html в корне)https://twitter.com/_prateekbh/status/1114071027238047746