javascript - 表详细信息的 Prop

Question

我有一个 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>.

有没有更好的方法，因为我是新来 react 的。

Answer 1

工作示例: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>
);