У меня есть json из фомат
{
description : "Meeting Description"
name : "Meeting name"
owner : {
name: "Creator Name",
email: "Creator Name"
}
}
Мне нужно отобразить детали в этом формате с помощью таблицы
Meeting Name : Meeting name
Description : Meeting name
Creator Name : Creator Name
Creator Email: Creator Name
Это код, который я использовал. Я использовал оператор распространения, чтобы получить детали из внутреннего json.
function DisplayDetails(props) {
return (
<table style = {{ padding: "10px" }}>
<tbody>
<tr>
<td>Meeting Name</td>
<th>: {props.name}</th>
</tr>
<tr>
<td>Description</td>
<th>: {props.description}</th>
</tr>
<DisplayOwner {...props.owner} />
</tbody>
</table>
)
}
function DisplayOwner(props) {
return (
<div>
<tr>
<td>Creator Name:</td>
<td>{props.name}</td>
</tr>
<tr>
<td>Creator Email:</td>
<td>{props.email}</td>
</tr>
</div>
)
}
Этот код показывает мне предупреждение о
validateDOMNesting(...): <tr> cannot appear as a child of <div>.
Есть ли какой-нибудь лучший подход, так как я новичок, чтобы отреагировать.
Проблема в том, что я не могу использовать <div> (внутри дочернего компонента) внутри таблицы. Если я удалю div, это вызовет ошибку.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Обновите до следующего, используйте фрагменты, https://reactjs.org/docs/fragments.html#short-syntaxhttps://reactjs.org/docs/fragments.html
import React from 'react';
...
function DisplayOwner(props) {
return (
<React.Fragment>
<tr>
<td>Creator Name:</td>
<td>{props.name}</td>
</tr>
<tr>
<td>Creator Email:</td>
<td>{props.email}</td>
</tr>
</React.Fragment>
)
}
Вместо этого использовать React.Fragment?
Рабочий пример: https://codesandbox.io/s/4qjq5z7w87
index.js
import React from "react";
import ReactDOM from "react-dom";
import DisplayDetails from "./displayDetails";
import "./styles.css";
const data = {
description: "Meeting Description",
name: "Meeting Name",
owner: {
name: "Creator Name",
email: "Creator Email"
}
};
const App = () => (
<div className = "App">
<h1>Display Details</h1>
<DisplayDetails {...data} />
</div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
displayDetails.js
import React from "react";
import DisplayOwner from "./displayOwner";
export default ({ description, name, owner }) => (
<table style = {{ padding: "10px" }}>
<tbody>
<tr>
<td>Meeting Name:</td>
<th>{name}</th>
</tr>
<tr>
<td>Description:</td>
<th>{description}</th>
</tr>
<DisplayOwner {...owner} />
</tbody>
</table>
);
displayOwner.js
import React, { Fragment } from "react";
export default ({ email, name }) => (
<Fragment>
<tr>
<td>Creator Name:</td>
<td>{name}</td>
</tr>
<tr>
<td>Creator Email:</td>
<td>{email}</td>
</tr>
</Fragment>
);
Можете ли вы показать полное предупреждающее сообщение?