Question

当我们点击该图标打开文本框时，我有一个原型..
以同样的方式在我的代码库中我试图让我的测试框关闭并打开...
此处代替css中的图标我正在使用图片
我在我的代码库中使用相同的原型代码..
但它不起作用......
我觉得下面这行有些问题 div className = {icon-search-container ${this.state.active ? 'active' : ''}}＆gt;
在我的原型代码中，他们正在
在我的代码库中我不知道在哪里渲染 - 在小提琴中提供原型和我的代码库
我甚至减少了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>

Answer 1

什么不工作的例子有点长而且凌乱，所以也许我错过了，但我不认为你在呼叫React.render()，所以这是一个大问题。此外，自定义组件必须以大写字母开头：<SportsTopSection />，而不是<sportsTopSection/>。

编辑以响应更干净的代码：嗯，简短的回答是＆＃34;它没有渲染，因为它首先抛出一个错误。＆＃34;为什么它首先出错？错误说＆＃34;导出未定义。＆＃34;我没有使用CodePen，但如果导入和导出工作，我会感到惊讶。你看过这个问题吗？

为什么反应中的转换函数无法呈现？

1 个答案: