Реагировать на синтаксис JSX - PullRequest
Новая
       7

Реагировать на синтаксис JSX

0 голосов
/ 20 февраля 2019

Я использую код ниже для создания компонента реакции.

function Button(props) {
  return (
    <button onClick={props.handleClick}>
      {props.name}
    </button>
  )
}


class LikeButton extends React.Component {

  handleClick = () => {
    console.log('ciao');
  }

  render() {
    return (
      <Button handleClick={this.handleClick}
        name='Get' />
    )
  }
}

ReactDOM.render(<LikeButton />, document.getElementById('buttons'));

Я попробовал код с песочницей, и он отлично работает.Проблема в том, что когда я запускаю свой код, я получаю синтаксис ошибки в третьей строке моей функции Button.

Сначала я подумал, что это ошибка, связанная с babel, но я использую CDN, и он должен работать.

1 Ответ

0 голосов
/ 20 февраля 2019

Если вы используете Babel из CDN для экспериментов, вам необходимо убедиться, что ваш тег script также имеет атрибут type="text/babel".

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="buttons"></div>

<script type="text/babel">
function Button(props) {
  return <button onClick={props.handleClick}>{props.name}</button>;
}

class LikeButton extends React.Component {
  handleClick = () => {
    console.log('ciao');
  }

  render() {
    return <Button handleClick={this.handleClick} name='Get' />;
  }
}

ReactDOM.render(<LikeButton />, document.getElementById('buttons'));
</script>
...