3

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

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>;
}

Почему?

1 ответ 1

0

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

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>
  </>
}
9

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.