Можно ли как-то сгруппировать элементы с одинаковыми параметрами в React?

Question

[p3trukh1n]

Есть несколько JSX-элементов с одинаковой частью параметров:

<NavLink to='/stats' activeClass="active" activeStyle={{fontWeight: "bold"}}>Stats</NavLink>
<NavLink to='/home' activeClass="active" activeStyle={{fontWeight: "bold"}}>Home</NavLink>

Использовать одинаковые activeClass и activeStyle во всех ссылках (их больше, чем 2) громоздко, как можно сократить код, чтобы не писать одинаковые параметры для каждого элемента?

Answer 1

[hzzzzl]

const SuperLink = (props) => <NavLink activeClass="active" activeStyle={{fontWeight: "bold"}} to={props.to}>{props.text}</NavLink>

....

<SuperLink to="/stats" text="Stats"/>

Comments

[p3trukh1n]

Вроде, props.children? Это самый красивый способ решить мою проблему?

[hzzzzl]

p3trukh1n, придется писать закрывающий тэг тогда, долго :D
но да, если надо что-то большем чем одно слово

Answer 2

[Антон Спирин]

Еще вариант:

const linkProps = {
  activeClass: 'active',
  activeStyle: { fontWeight: 'bold' },
};

return (
  <>
    <NavLink to='/stats' {...linkProps}>Stats</NavLink>
    <NavLink to='/home' {...linkProps}>Home</NavLink>
  </>
);

Comments

[p3trukh1n]

Отличный вариант, спасибо огромное, но я, пожалуй еще подожду немного.
Не подскажете, что за пустые треугольные скобки перед navlink и после них? Это вы так обозначаете, что там должен быть элемент, или это что-то значит в React?

[Антон Спирин]

p3trukh1n, короткий вид записи

<React.Fragment>
  {/* ... */}
</React.Fragment>

[p3trukh1n]

Антон Спирин, спасибо, и, вопрос немного не по теме, но в группу вопросов по React он входит:
Route отрендерить можно только с компонентом, нельзя туда просто текст впихнуть ведь, да?