Реквизит к деталям стола

У меня есть 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>:&nbsp;{props.name}</th>
                </tr>
                <tr>
                    <td>Description</td>
                    <th>:&nbsp;{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>.

Есть ли какой-нибудь лучший подход, так как я новичок, чтобы отреагировать.

Можете ли вы показать полное предупреждающее сообщение?

Ayushya 15.09.2018 06:30

Проблема в том, что я не могу использовать <div> (внутри дочернего компонента) внутри таблицы. Если я удалю div, это вызовет ошибку.

Edwin Babu 15.09.2018 06:38
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
151
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Обновите до следующего, используйте фрагменты, 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?

Ayushya 15.09.2018 06:45
Ответ принят как подходящий

Рабочий пример: 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>
);

Другие вопросы по теме