react.js:尖括号中的javascript不起作用 [英] react.js : javascript in angle brackets not working

问题描述

出于某种原因，当我尝试将 JavaScript 输入到 HTML 部分的角度部分时，它不起作用.我正在使用 Thymeleaf.

For some reason when I try and enter JavaScript into the angle part of the HTML portion it does not work. I'm using Thymeleaf.

这是 HTML 部分:

Here's the HTML portion:

   <button className="btn btn-info" onClick={this.displayInfo}>Click for info about {firstName[i]}</button>

所以在这种情况下它不起作用并返回一个错误:

So in this instance it does not work and returns an error:

unexpected error (type=Internal Server Error, status=500) Exception parsing document

如果我删除 onClick={this.displayInfo} 它将起作用.

If I remove the onClick={this.displayInfo} it will work.

我的功能:

   displayInfo(){
        console.log("it worked");
    }

The render() function:
    render(){
        var {number, firstName, lastName} = this.state;
        var rows = [];
        for (var i in number)
        {
           rows[i] = (<tr>
                        <td>{number[i]}</td>
                        <td>{firstName[i]}</td>
                        <td>{lastName[i]}</td>
                        <td><button className="btn btn-info" onClick={this.displayInfo()}>Click for info about {firstName[i]}</button></td>
                      </tr>);
        }
        var headers = <tr><th>Number</th><th>First Name</th><th>Last Name</th><th>Extra Info</th></tr>;
        return (<table className="table table-bordered">
                                    <thead>{headers}</thead>
                                    <tbody>{rows}</tbody>
                                    </table>);
    }

推荐答案

我收到错误是因为 Thyemleaf 认为我正在输入 HTML:我刚刚添加了这个:

I was getting the error because Thyemleaf thought that I was typing HTML: I just added this:

  /*<![CDATA[*/
  ...
  /*]]>*/

这篇关于react.js:尖括号中的javascript不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！