JSX Bootstrap не завершен

Я использую bootstrap с response, и компилятор не работает на том основании, что есть незавершенное содержимое JSX. Я проходил через это дюжину раз, и, как бы троичный результат ни получился, я не вижу незакрытых тегов. Я новичок в реакции, поэтому полагаю, что что-то еще не так. Чтобы сократить код, я включил только return ():

<div className = "container-fluid">

        <div className = "row">
          <div className = "col-12">
            <SearchBar />
          </div>
        </div>


    {this.state.results ? (
            <div className = "row">
                <div className = "col-12">
                        <div className = "row">
                            <div className = "col-6 offset-md-3">
                        <div className = "row">
                            <div className = "col">
                                        <InputRange
                                        maxValue = {this.state.maxPrice}
                                        minValue = {this.state.minPrice}
                                        value = {this.state.priceRange}
                                        formatLabel = {x => {
                                        return `£${x}`;
                                        }}
                                        onChange = {value => this.setState({ priceRange: value })}
                                        />
                            </div>
                        </div>

                        <div className = "row">
                            <div className = "col">
                                            Selection: {visibleResults.length}
                            </div>
                        </div>
                    <div>
                </div>

                    <div className = "row">
                            <div className = "col-6 offset-md-3">
                                 {visibleResults.map((item, index) => (
                                    <Link to = {`/listing/${item.id}`}>
                                    <SearchResult result = {item} key = {index} />
                                    </Link>
                                ))}
                            </div>
                </div>
            </div>
            </div>
        ) : (
        <div className = "row">
            <div className = "col">
                    <h1>LOADING...</h1>
                </div>
        </div>
    )}

    </div>
)

В общем, я считаю, что JSX может стать чрезвычайно сложным, если вы используете его как литералы в очень сложных выражениях. Это может помочь прояснить ситуацию, если вы создадите некоторые функции (или другие компоненты!), Которые инкапсулируют более сложную логику, которую вы используете.

— 12.10.2018 15:50

reactjs bootstrap-4 react-bootstrap

12.10.2018 15:48

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Здесь вам нужно закрыть div:

                    <div className = "row">
                        <div className = "col">
                                        Selection: {visibleResults.length}
                        </div>
                    </div>
                <div> // This should be </div>
            </div>

Отличный улов, спасибо. Быстрый вопрос - у меня установлен eslint с конфигурацией по умолчанию airbnb. Я ожидал, что он поймает это ... Я неправильно настроил или я слишком многого жду?

— 12.10.2018 16:00

Я не уверен. Прошло некоторое время с тех пор, как я использовал ESLint сам по себе. Я использую Prettier с ESLint, и мне кажется, что это действительно помогло сократить количество ошибок и улучшить согласованность форматирования: prettier.io/docs/en/eslint.html

— 12.10.2018 16:11

12.10.2018 15:56