Компонент, возвращающий preact-compat ‹undefined›‹/undefined›

Я пытаюсь использовать компонент React (реактивный слайдер) и получаю <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"
        }
      }
    ]
  ]
}

Жаль, что в консоли не выдается и не отображается ошибка. Я не уверен, что я мог делать неправильно.


reactjs react-dom components preact
person sanjosep43    schedule 31.03.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы используете неправильный синтаксис реакции/преакта Компонента, просмотрите этот 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'))
person Alejandro Garcia Anglada    schedule 29.06.2017