javascript - 使用 props 从表中获取值

Question

我正在尝试使用 props 构建一个表，并将值从该表传递给另一个函数。但由于某种原因，结果没有显示。我做错了什么？

import Table from "https://cdn.skypack.dev/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b5c7d0d4d6c198d7dadac1c6c1c7d4c5f5879b809b85" rel="noreferrer noopener nofollow">[email protected]</a>";

function Tables(props) {
  
  return (
  <Table>
    <thead>
      <tr>
        <th>a</th>
        <th>b</th>
        <th>c</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>{props.first}</td>
        <td>{props.second}</td>
        <td>{props.third}</td>
      </tr>
    </tbody>
  </Table>
      )
}

function App() {
  return (
    <div>
      <Tables first="Sara" />
      <Tables second="Cahal" />
      <Tables third="Edite" />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Answer 1

您正在渲染表格三次，每次只有一个 Prop ，您需要

如果你想显示一个包含三个 props 的表格，应该是这样的。

import Table from "https://cdn.skypack.dev/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfbdaaaeacbbe2ada0a0bbbcbbbdaebf8ffde1fae1ff" rel="noreferrer noopener nofollow">[email protected]</a>";

function Tables(props) {
  
  return (
  <Table>
    <thead>
      <tr>
        <th>a</th>
        <th>b</th>
        <th>c</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>{props.first}</td>
        <td>{props.second}</td>
        <td>{props.third}</td>
      </tr>
    </tbody>
  </Table>
      )
}

function App() {
  return (
    <div>
      <Tables first="Sara" second="Cahal" third="Edite" />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);