Нужны ли скобки здесь, в этом фрагменте React?
В целом я понимаю, как работают стрелки функций ES6. Я также понимаю, что иногда круглые скобки могут использоваться для неявного возврата объекта. Однако, с точки зрения React/JSX, нужны ли круглые скобки в следующем?
class Contactlist extends React.Component {
render() {
const people = [
{ name: 'Tyler' },
{ name: 'Karen' },
{ name: 'Richard' }
]
return <ol>
{
people.map(
// are the parentheses necessary here??
person => (<li key = {person.name}>{person.name}</li>)
)
}
</ol>
}
}
Или просто нормально делать следующее?
...
return <ol>
{
people.map(
person => <li key = {person.name}>{person.name}</li>
)
}
</ol>
...
Итак, я думаю, что мне действительно следует спросить о том, считаются ли элементы jsx объектами js. Если это так, то круглые скобки, вероятно, используются для неявного возврата их из функции жирной стрелки.
Оба правильны. В идеале у вас должен быть стандартный (для всего проекта) линтер, который исправляет эти стили за вас и поддерживает их согласованность. Используйте Prettier или что-то в этом роде. Это обеспечит единообразие стиля кода независимо от личных предпочтений разработчиков.
@ Jayce444 Jayce444 Спасибо ... Но я говорил о теле функции, а НЕ о параметрах. В этом случае я новичок в React и JSX и поэтому не был уверен, считаются ли эти элементы JSX объектами js. Итак, мой вопрос действительно восходит к React/JSX.
@Nishant Большое спасибо за ваше время. Однако мой вопрос не о форматировании кода. Также линтеры помогут мне с синтаксическими, а не логическими ошибками. Много раз синтаксически код в порядке, но логически он ошибочен... Здесь, поскольку я не полностью знаком с тем, как React/JSX делает что-то, я не был уверен, есть ли что-то большее, чем то, что кажется на первый взгляд. .
Отвечает ли это на ваш вопрос? Почему рекомендуется заключать JSX, назначенные переменным, в круглые скобки?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
В этом случае абсолютно нормально не использовать круглые скобки.
return <ol>
{
people.map(
person => <li key = {person.name}>{person.name}</li>
)
}
</ol>
Хорошей практикой является использование круглых скобок только вокруг многострочного JSX. Итак, в вашем случае вам нужно обернуть JSX внутри возврата в круглых скобках, и вы можете пропустить обертку в круглых скобках JSX внутри функции карты.
return (
<ol>
{
people.map(
person => <li key = {person.name}>{person.name}</li>
)
}
</ol>
);
Технически это не имеет ничего общего с React, код, о котором вы спрашиваете, - это просто ванильный Javascript - базовая функция карты. И правило таково: только с одним параметром круглые скобки необязательны. С 2 или более они вам нужны