Preact-compat的復位元件<undefined></undefined>

Question

我試圖用一個陣營成分（反應滑塊）和我得到<undefined></undefined>

import React, { Component } from 'react'; 
    import { render } from 'react-dom'; 
    import Slider from 'react-slider'; 
    const Range = Slider.Range; 

    export class PreactTest{ 
     constructor(){ super(); } 
     create(){ 
     render(
      <Range allowCross={false} defaultValue={[0, 20]} onChange={(x) => {console.log(x);} } />, "some-id") 
     } 
     } 
    } 

.babelrc

{ 
    "sourceMaps": true, 
    "presets": ["react", "es2015"], 
    "plugins": [ 
    ["transform-decorators-legacy"], 
    ["transform-react-jsx"], 
    ["transform-class-properties"], 
    [ 
     "module-resolver", 
     { 
     "root": ["."], 
     "alias": { 
      "react": "preact-compat", 
      "react-dom": "preact-compat" 
     } 
     } 
    ] 
    ] 
} 

太糟糕了，沒有錯誤被拋出或顯示在控制檯中。我不確定我會做錯什麼。

Answer 1

您沒有使用正確的成分反應/ preact語法，請參閱本https://github.com/developit/preact#components

你的代碼應該看起來更像是這樣的：

import React, {Component} from 'react' 
import {Range} from 'react-slider' 

export default class PreactTest extends Component { 
    render() { 
    return (<Range allowCross={false} defaultValue={[0, 20]} onChange={(x) => {console.log(x);} } />) 
    } 
} 

然後到另一個文件做react-dom渲染

import {render} from 'react-dom' 
import PreactTest from './preact-test' 

render(<PreactTest />, document.getElementById('some-id'))