Preact 渲染组件到指定的 div答案

【问题标题】：Preact render component to specified divPreact 渲染组件到指定的 div
【发布时间】：2019-04-01 14:47:15
【问题描述】：

由于 preact cli 生成的 preact 应用程序不附带任何 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>
        );
    }
}

这是我在routes/list中的index.js

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 中呈现卡片。这是怎么做到的？

【问题讨论】：

您使用的是哪个版本的 preact？另外，您是否尝试将其放入当前 DOM 结构中不存在的 div 中？
Preact /React 中的想法是在其中包含整个站点 - 在这种情况下，您只需导入组件并在其他组件中使用它。如果没有，您必须在您的 app.js / index.js / main.js 中执行单独的应用程序，或者无论您如何调用它，在所需的 div 中呈现您的第二个应用程序。请参阅文档preactjs.com/guide/getting-started#rendering-jsx 只需为您的组件执行此操作即可。
@pmkro preact cli 2.2.1。是的，因为我们没有任何 html 文件来保存模板
@MatiusNugrohoAryanto 如果整个页面都是预先准备好的，只需填写其余部分并将其放在您想要的位置。 preact-cli 假定您正在使用 preact 生成整个站点
@pmkro 你能提供一个代码示例吗？

标签： javascript preact

【解决方案1】：

如果您可以使用候选版本，您可以升级到 3.0：（根目录中有 template.html） https://twitter.com/_prateekbh/status/1114071027238047746

【讨论】：