Зачем в React 3 точки перед props?

Рейтинг: 1Ответов: 2Опубликовано: 09.01.2023

Зачем нужно ставить три точки перед props в React? Например: ...props

Ответы

▲ 2Принят

Три точки ... - это ничто иное как оператор spread. Он "разворачивает" объект / массив позволяя передать все его элементы в другой компонент (или объект), не перечисляя их вручную.

Например:

const App = () => {
    return <People name={'Dmitriy'} secondName={'Kuplinov'} weight={70} age={30}>
        Person
    </People>
}

const People = (props) => {
    // передали все пропсы через ... (spread оператор)
    return <Info {...props}>Info</Info>
}

const Info = ({name, secondName, weight, age}) => { // тут получили
    return <div>{name}, {secondName}, {weight}, {age} </div> 
}
▲ 2

Зачем нужно ставить три точки перед props в React? Например: ...props

Слово "нужно" тут не подходит. У функции есть возможность принимать параметры в массив function (...arr) {}. Вот собственно и все.

function Test(...arr) {
  console.log(arr)
}

Test(1, 2, 3, 4, 5)