反应应用程序中的渲染函数中的 Javascript 片段错误 - 预期为“}”答案

【问题标题】：Javascript snipet error in render function in a react application - '}' expected反应应用程序中的渲染函数中的 Javascript 片段错误 - 预期为“}”
【发布时间】：2023-05-29 08:06:01
【问题描述】：

我正在编写一个简单的反应代码，其中有一部分 javascript 会引发错误

var React = require('react');
var Link = require('react-router').Link;

var openColumnAnalysis = React.createClass({

  render: function(){
        return(
            <body>
                <div>
                    <Link to={"/"}>Reports Home</Link>
                    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Reports.."></input>
                    <ul id="myUL">
                          <li>
                                <a href="myLink" target="_blank">Map Report</a>
                          </li>
                          <li>
                                <a href="myLink" target="_blank">Customer Report</a>
                          </li>
                    </ul>

                </div>
                <script>
                    function myFunction()
                    {
                        // document.write("Hi")
                        filter = document.getElementById('myInput').value
                        li_tag = document.getElementById('myUL').getElementsByTagName('li')

                        for (i = 0; i < li_tag.length; i++)
                        {
                            a_tag = li_tag[i].getElementsByTagName('a')[0];
                            if (a_tag.innerHTML.toUpperCase().indexOf(filter) > -1)
                            {
                                li_tag[i].style.display = "";
                            }
                            else
                            {
                                li_tag[i].style.display = "none";
                            }
                        }
                    }

                </script>
            </body>
        );
  }
  });
module.exports = openColumnAnalysis;

'document.write("Hi")' 语句完美运行。但即使我只写 'var inp;'仅此而已.. 我开始收到类似“}预期”的错误！

我不明白这是哪里出了问题...我正在关注此链接：https://www.w3schools.com/howto/howto_js_filter_lists.asp 进行此学习。

编辑：按照要求将我的代码粘贴为 ref .. :) 如果我删除脚本标签，那么代码运行良好......但我正在尝试根据搜索输入过滤 li 标签。提前谢谢你！

【问题讨论】：

记住在缩进你的代码时要遵守纪律！
你能发布整个文件的代码吗？在我看来，错误不在这个 sn-p 中。
你能添加给出错误的代码吗？
@Grandas 请不要完整文件...我们需要minimal reproducible example
这个 sn-p 没有一个错误，请通过添加确切的代码 sn-p 来完成您的问题。

标签： javascript syntax curly-braces

【解决方案1】：

感谢您的帮助，但我在这里得到了答案。出于某种原因，我不确定脚本标签在任何反应函数的返回语句中定义时是否不起作用。所以我创建了另一个函数来执行过滤并在渲染函数中调用如下：

filterRepo: function(){
    return(
        function myFunction() {
            var filter = document.getElementById('myInput').value.toUpperCase();
            var li = document.getElementById("myUL").getElementsByTagName('li');

            // Loop through all list items, and hide those who don't match the search query
            for (i = 0; i < li.length; i++) {
                a = li[i].getElementsByTagName("a")[0];
                if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    li[i].style.display = "";
                } else {
                    li[i].style.display = "none";
                }
            }
        }
    );

},
render: function(){
    var repoLink = this.state.repoLinks;
    repoLink = repoLink.map(function(item, index){
        return(
            <OpenReport key={index} desc={item.description} ); 
    }.bind(this));

    return(
        <div id="inside_repoInfo">
            <br></br>
            <input type="text" id="myInput" onKeyUp={this.filterRepo()} placeholder="Search for Report.."></input>
            <ul id="myUL" >{repoLink}</ul>
        </div>
    );
}

剩下的代码只是为了显示我在 OpenReport 组件中定义的列表标签。

希望这对其他人有所帮助！

【讨论】：