Как создать многострочный компонент?

185

01 октября 2018, 01:00

Имеется такой компонент

function Person(props){
  return (
    <div>Name: {props.name} {props.surname}</div>
    <div>Age: {props.age}</div>
  );
}

При рендеринге он не появляется.

const element = <Person name="Иван" surname="Иванович" age="47"></Person>;
ReactDOM.render(element, document.getElementById('app'));

Но когда оставляем один блок - все работает

function Person(props){
  return <div>Name: {props.name} {props.surname}</div>;
}

Почему?

Answer 1

Если реакт достаточно новый, то надо использовать фрагменты. А если старый, то никак.

function Person(props) { 
  return <React.Fragment> 
    <div>Name: {props.name} {props.surname}</div> 
    <div>Age: {props.age}</div> 
  </React.Fragment> 
} 
 
const element = <Person name="Иван" surname="Иванович" age="47"></Person>; 
ReactDOM.render(element, document.getElementById('app'));

<script src="//cdnjs.cloudflare.com/ajax/libs/react/16.4.1/umd/react.production.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.production.min.js"></script> 
 
<section id="app"></section>

По идее, для фрагментов должен быть доступен более короткий синтаксис, но в сниппете он не заработал (возможно, бабель устарел):

function Person(props) {
  return <>
    <div>Name: {props.name} {props.surname}</div>
    <div>Age: {props.age}</div>
  </>
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как соединить файлы JS из заданной папки в 1 файл, используя GRUNT

190

javascript

Не корректно работает цикл

Нужно, чтобы по клику на кнопку запускалась функция, которая увеличивает каждый блок(первый через 500мс, второй через секунду и тд

197

javascript

Handlebars js register helper for object

Как в handlebarsjs зарегистрировать helper type object, чтобы его можно было использовать в шаблоне как {{ testfirst }} и {{ test

183

javascript

как запустить в одной функции два последовательных request запроса?

нужно последовательно запустить два request запроса(модуль в javascript), условия не асинхронно

187