道具到桌子的细节

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>.

有没有更好的方法，因为我是新手做出反应。

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

Answer 2

更新到以下，使用片段，https://reactjs.org/docs/fragments.html#short-syntax https://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>
    )
}