在反应中正确编写和显示最佳实践的javascript代码

Question

在我的 react 应用程序中，我编写了以下代码（文件名 SearchBox.jsx）：

import React from 'react'
import ReactDOM from 'react-dom'
import $ from 'jquery'

export default class SearchBox extends React.Component {
    createAjax() {
        let query = ReactDOM.findDOMNode(this.refs.query).value
        let category = ReactDOM.findDOMNode(this.refs.category).value
        let URL = `https://another.url.com/search?term=${query}&country=us&entity=${category}`
        this.props.search(URL)
        console.log(URL)
    }

    render() {
        return (
            <div className="app__wrapper">
                <section className="map-container">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d89077.13001931181!2d4.835120949999999!3d45.7579555!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sfr!2sfr!4v1455092172025" width="100%" height="100%" frameBorder="0" style={{border:0}} allowFullScreen>
                    </iframe>
                </section>
                <section className="header">
                    <div className="header__logo">
                        <i className="fa fa-shopping-basket"></i>
                        <h1><b>my</b>Market</h1>
                    </div>
                </section>
                <section className="search">
                    <div className="search__wrapper">
                        <div className="search__bar">
                            <input type="text" className="search__input" placeholder="Recherche à proximité de ..."></input>
                            <button className="search__button search__button--close"><i className="fa fa-times"></i>
                            </button>
                        </div>
                        <ul className="search__list">
                            <li className="search__item search__item--prox"><i className="fa fa-dot-circle-o"></i>
                                Ma position actuelle
                            </li>
                            <li className="search__item">Lyon</li>
                            <li className="search__item">Chassieu</li>
                            <li className="search__item">Villeurbanne</li>
                            <li className="search__item">Mâcon</li>
                            <li className="search__item">vaux-en-velin</li>
                        </ul>
                    </div>
                </section>
                <script type="text/javascript">
                    console.log("blabla")
                </script>
            </div>
        )
    }
}

我是 react.js 的新手，我不确定发生了什么。 我的浏览器控制台没有出现错误。

但是如果我想在脚本标签中添加一些我喜欢的 jQuery 脚本：

<script type="text/javascript">
    $(document).ready(function(){
        $('.search__input').on("focusin", function(){
            $('.search__button--close').fadeIn();
            $('.search__list').css('display', 'block');
        });
        $('.search__input').on("focusout", function(){
            $('.search__button--close').fadeOut();
            $('.search__list').css('display', 'none');
        });
        $('.days__item').on('click', function(){
            if($(this).attr('data-checked') == 'true'){
                $(this).attr('data-checked', 'false');
            } else {
                $(this).attr('data-checked', 'true');
            }
        })
    });
</script>

我的浏览器控制台出现以下错误：

Module build failed: SyntaxError: /my/path/to/SearchBox.jsx: Unexpected token (62:26)
  60 |                             $('.search__button--close').fadeIn();
  61 |                             $('.search__list').css('display', 'block');
> 62 |                         });
     |                           ^
  63 |                         $('.search__input').on("focusout", function(){
  64 |                             $('.search__button--close').fadeOut();
  65 |                             $('.search__list').css('display', 'none');

Answer 1

您可以使用 React 附加到相同的事件处理程序。例如，您的 focusout 事件可能会变得模糊（没有后代元素处理，但这里似乎不需要）：

<input type="text" onBlur={this.handleSearchInputBlur} className="search__input" placeholder="Recherche à proximité de ..."></input>

然后您可以设置组件的状态，例如：

this.searchInputHasFocus = false;

然后在您的渲染中使用它来设置，例如，CSS fadeOut 类和阻止搜索列表元素渲染的东西。 通常在 React 中，不建议进行大量 DOM 操作。 React 专门设计用于有效地执行此操作。如果需要，我有时会使用它，但在这种情况下，您可以使用 React 的功能来删除搜索列表等。从组件中渲染脚本标签应该永远没有必要。

推荐阅读：

https://facebook.github.io/react/docs/thinking-in-react.html

https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html

Answer 2

您可以将 console.log 放在 JSX 之外，而不是 <script> 标记：

render() {
        console.log("blabla")
        return (
            <div className="app__wrapper">...</div>
        )
}