反应returning的

Question

我有一个非常简单的React代码，可以正常工作：

function Columns(){
    return (
      <React.Fragment>
        <li>Hello</li>
        <li>World</li>
      </React.Fragment>
    );
  }
  function Example(){
    return (
      <div>
      <ul>
      <Columns />
      </ul>
      </div>
    )
  }
  ReactDOM.render(<Example />, document.getElementById('root'));

以下示例出了什么问题，该示例似乎未返回任何内容：

function Columns(){
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    );
  }
  function Example(){
    return (
      <div>
        <table>
          <tr>
            <Columns />
          </tr>
        </table>           
      </div>
    )
  }
  ReactDOM.render(<Example />, document.getElementById('root'));

我只是看不出与React文档有什么不同，它几乎给出了确切的示例here

Answer 1

已经存在，您只是看不到边界，因为边界是透明的：）

function Columns() {
  const style = { border: "solid 1px black" };
  return (
    <React.Fragment>
      <td style={style}>Hello</td>
      <td style={style}>World</td>
    </React.Fragment>
  );
}

https://3rpyml13wm.codesandbox.io/

Answer 2

• 使用类代替功能
• 导入React和ReactDom
• 导入片段

    import React, { Component, Fragment } from 'react';
    import ReactDOM from 'react-dom';

    class Example extends Component
    {

        render() {
            return (
                ...
                <Columns />
                ...
            );
        }
    }

    class Columns extends Component
    {
        render() {
            return (
                ...
            );
        }
    }

   ReactDOM.render(<Example />, document.getElementById('root'));

Answer 3

问题可能出在import s中。

import React from 'react';
import ReactDOM from 'react-dom';