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'))