Добрый вечер,
Я новичок в 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
.
Спасибо.