Блог

Главная - Вопросы по программированию - Реакция не отображается

Реакция не отображается

#javascript #reactjs

#javascript #reactjs

Вопрос:

Мой код реакции, похоже, не работает. У меня есть следующий html:

index.html

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
    </head>
    <body>
        <div id="example"></div>

        <form id="frm1" action="form_action.asp">
          First name: <input type="text" name="fname"><br>
          Last name: <input type="text" name="lname"><br><br>
          <input type="button" onclick="myFunction()" value="Submit" class="btn-primary">
        </form>

        <script src="build/react.js"></script>
        <script src="build/react-dom.js"></script>
        <script type="text/babel" src="helloworld.js"></script>
    </body>
</html>

и следующий код реакции

helloworld.js:

 var Comment = React.createClass({
   render: function(){
      return(
         <div>
            <div className="commentText">Some Comment</div>
            <button onClick="">Edit</button>
            <button onClick="">Remove</button>
         </div>
      );
   }
});


function myFunction() {
        alert("hello world");
}

ReactDOM.render(
   <Comment />,document.getElementById('example')
);

Но он не выдает комментарий в примере div и не вызывает функцию для поля ввода. Я подозреваю, что что-то не так с моей реактивной настройкой в целом, поэтому я публикую обе вещи здесь одновременно. Однако папка сборки и файлы, на которые ссылаются, все существуют.

Комментарии:

1. Какие-либо ошибки в консоли вашего браузера?

2. Нет, ошибок нет, кроме ошибки, связанной с функцией, которая не распознана, поэтому там она выдает мне «Неперехваченную ошибку ссылки: myFunction не определена». Вот почему я думаю, что он просто не распознает мой файл react (helloworld.js ) вообще.

3. Вы пропустили закрывающую скобку ( ) ) после </div> в вашем JSX (я удивлен, что это не было отображено как ошибка для вас; это было для меня).

4. спасибо, я это исправил. но это все еще не работает. Я также удивлен, что это не отображалось как ошибка, но это, опять же, указывало бы на то, что что-то не так с моей настройкой, не так ли?

5. Вы пытаетесь использовать Babel? Похоже babel-browser , что он больше не поддерживается , поэтому вам придется перенести его с помощью Webpack или какой-либо другой системы сборки и загрузить его как обычный JavaScript.

Ответ №1:

Это работает, проверьте эту ссылку.

 var Comment = React.createClass({
   render: function(){
      return(
         <div>
            <div className="commentText">Some Comment</div>
            <button onClick="">Edit</button>
            <button onClick="">Remove</button>
         </div>
      );
   }
});


function myFunction() {
        alert("hello world");
}

ReactDOM.render(
   <Comment />,document.getElementById('example')
);

Комментарии:

1. спасибо за ответ. однако, похоже, у меня это не работает. может ли проблема в том, что я пытаюсь сделать это как часть электронного приложения?

2. Я так не думаю. Какой транспайлер вы используете? Какие-либо ошибки во время выполнения?

Ответ №2:

Используйте webpack для переноса вашего кода, поскольку babel-browser был удален.смотрите также, что функция события react onClick может быть определена в самом компоненте react helloworld.js следующим образом

 var Comment = React.createClass({
    handleClick: function() {
        alert("hello world");
   }
   render: function(){
      return(
         <div>
            <div className="commentText">Some Comment</div>
            <button onClick={this.handleClick()}>Edit</button>
            <button onClick="">Remove</button>
         </div>
      );
   }
});

function myFunction() {
        alert("hello world");
}

ReactDOM.render(
   <Comment />,document.getElementById('example')
);

Чтобы настроить webpack, перейдите по этой ссылке. Его легко отслеживать

Метки: