道具到桌子细节

工作示例: https://codesandbox.io/s/4qjq5z7w87

索引.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);

显示详细信息.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>
);

显示所有者.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>
);

更新如下,使用片段, 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>
    )
}