为啥 react 中的转换函数无法渲染?

Posted

技术标签:

【中文标题】为啥 react 中的转换函数无法渲染?【英文标题】:Why a transition function in react is not able to render?为什么 react 中的转换函数无法渲染? 【发布时间】:2016-05-22 17:21:03 【问题描述】: 我有一个原型,当我们单击文本框打开的那个图标时.. 以同样的方式在我的代码库中,我试图让我的测试框关闭和打开... 这里我使用的是图片而不是 css 中的图标 我在我的代码库中使用相同的原型代码.. 但它不起作用...

我认为下面这行有问题 div className=icon-search-container $this.state.active ? 'active' : ''>

在我的原型代码中,它们呈现在

在我的代码库中,我不确定在哪里渲染 - 在小提琴中提供原型和我的代码库 我什至减少了 css 但仍然无法找到:(

原型代码 - 工作 http://codepen.io/tasssik/pen/yeGozR

不工作的代码 http://codepen.io/anon/pen/zrymwq

main code to be fixed

 <div className=`icon-search-container $this.state.active ? 'active' : ''`>

                        <a onClick=this.handleClick href="javascript:;" className="fa fa-search sportsTopSection-navUtilities-search">
                            <span className="hidden">Search <abbr>NBA</abbr>.com</span>
                        </a>

                        <input type="text" ref='search'className="search-input" placeholder="Search" onBlur=() => this.setState(active: false)/>

                        <span className="fa fa-times-circle"
                            onClick=() => this.setState(active: false)>
                        </span>

                    </div>

【问题讨论】:

【参考方案1】:

不工作的例子有点冗长和混乱,所以也许我错过了,但我不认为你打电话给React.render(),所以这是一个大问题。此外,自定义组件必须以大写字母开头:&lt;SportsTopSection /&gt;,而不是 &lt;sportsTopSection/&gt;

编辑以响应更简洁的代码: 好吧,简短的回答是“它没有渲染,因为它首先抛出错误。”为什么会先出错?错误显示“未定义导出”。我不使用 CodePen,但如果导入和导出在其中起作用,我会感到惊讶。你有没有看过这是否是问题所在?

【讨论】:

H 感谢您的回复...清理了我不工作的代码...您现在可以帮我吗

以上是关于为啥 react 中的转换函数无法渲染?的主要内容,如果未能解决你的问题,请参考以下文章

React hooks:为啥异步函数中的多个 useState 设置器会导致多次重新渲染?

无法将非箭头函数转换为函数表达式。 React/Preact 构建失败

react中的jsx丶实现原生dom的渲染丶函数组件丶类组件的首次渲染实现

如果我没有更改状态的引用,为啥 React 会调用渲染函数? [复制]

相机不显示,状态转换问题,反应原生

为啥建议从矩阵中获取最大值的函数->无法将'int(*)[C]'转换为'int(*)[0]