Внесение ошибок при рефакторинге внутри в интерфейсе React

Question

Добрый вечер,

Я новичок в React, и у меня возникла проблема с отображением компонентов реакции после рефакторинга. Я уверен, что моя проблема - простая синтаксическая ошибка, но я слишком новичок, чтобы разобраться в этом самостоятельно.

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

    let people = null;

    if (this.state.passersby) {
        people = (
            <Passersby
                name={this.state.passersby.name}
                activity={this.state.passersby.activity}
                key={this.state.passersby.id}
                passersby={this.state.passersby}
                clicked={this.deleteThisJeff}
            />
        )
    }

    return (
        <BrowserRouter>
            <Switch>
                <Route exact path="/" render={() => {
                    return (<div>
                        <h1>Jeffs?</h1>
                        <button onClick={this.startJeff}>Start the Jeffing</button>
                        <button onClick={this.postInterval}>Interval Test</button>
                        <button onClick={this.stopIt}>NO MORE JEFFS</button>
                        <Suspense fallback={<div>Jeff Could Be Anywhere...</div>}>
                            {people}
                        </Suspense>
                        <div ref={(el) => { this.bottomElement = el }} />
                    </div>)}
                } />
            </Switch>
        </BrowserRouter>
    )

, но после рефакторинга следующим образом:

    let playing = (
        <div>
            <h1>Jeffs?</h1>
            <button onClick={this.startJeff}>Start the Jeffing</button>
            <button onClick={this.postInterval}>Interval Test</button>
            <button onClick={this.stopIt}>NO MORE JEFFS</button>
            <Suspense fallback={<div>Jeff Could Be Anywhere...</div>}>
                {people}
            </Suspense>
            <div ref={(el) => { this.bottomElement = el }} />
        </div>
    );

    return (
        <BrowserRouter>
            <Switch>
                <Route
                    exact
                    path="/"
                    render={() => {
                        return { playing }
                    }
                    } />
            </Switch>
        </BrowserRouter>
    )

Я получаю следующую ошибку:

«Объекты недействительны как дочерние объекты React (найдено: объект с ключами {играет}). Если вы хотели визуализировать коллекцию дочерних элементов, используйте вместо этого массив . in Route (в Publi c. js: 135) ... "

или следующим образом:

    let playing = (
        <div>
            <h1>Jeffs?</h1>
            <button onClick={this.startJeff}>Start the Jeffing</button>
            <button onClick={this.postInterval}>Interval Test</button>
            <button onClick={this.stopIt}>NO MORE JEFFS</button>
            <Suspense fallback={<div>Jeff Could Be Anywhere...</div>}>
                {people}
            </Suspense>
            <div ref={(el) => { this.bottomElement = el }} />
        </div>
    );

    return (
        <BrowserRouter>
            <Switch>
                <Route
                    exact
                    path="/"
                    component={playing}
                    />
            </Switch>
        </BrowserRouter>
    )

Я получаю следующую ошибку:

"Недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: объект."

Что мне нужно исправить? Я могу довольствоваться беспорядком, если необходимо, но я благодарен за любую помощь в углублении моего понимания JSX.

Спасибо.

Answer 1

Если бы я мог немного улучшить ответ jme, так как я не могу комментировать. Вы можете просто сделать:

<Route
    exact
    path="/"
    render={() => playing}
/>

Он делает то же самое, только чище.

Answer 2

Итак, проблема в том, что вам не нужны фигурные скобки в вашем возврате:

<Route
    exact
    path="/"
    render={() => {
        return playing 
     }
 } />

Когда вы добавляете фигурные скобки вокруг переменной воспроизведения, она обрабатывается как объект Javascript .