reactjs - Preact-compat 返回组件

Question

我正在尝试使用 React 组件（react-slider），我得到了<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

您没有使用正确的组件 react/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'))