1

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"
        }
      }
    ]
  ]
}

残念ながら、コンソールにエラーがスローされたり表示されたりすることはありません。何が間違っているのかわかりません。

4

1 に答える 1

0

正しいコンポーネントの 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'))
于 2017-06-29T09:52:48.577 に答える