错误:Rights(.)：渲染过程中没有返回任何内容

Question

我的应用程序中有以下代码，它应该在页面底部添加版权信息。但是，当我试图导入组件时，要么不返回任何内容，要么导入本身超出了范围。

这是我第一个真正大小的Node应用程序，它的工作方式似乎与Ruby的液态语法有些不同，我对Ruby的导入比较熟悉。

应如何做到这一点？

Contact.js

import React, { Component } from "react";
import { Link } from "react-router-dom";

class Contact extends Component {
  render() {
    return (
      <div>
        <form
          action="https://formspree.io/chris@chrisfinazzo.com"
          method="POST"
        >
          <div id="nameplate">
            <h2 id="contact">Contact Me</h2>
            <p>Get in Touch</p>
          </div>
          <label htmlFor="fname">First Name</label>
          <input
            type="text"
            className="field"
            name="firstname"
            placeholder="John"
          />
          <label htmlFor="lname">Last Name</label>
          <input
            type="text"
            className="field"
            name="lastname"
            placeholder="Smith"
          />
          <label htmlFor="email">Email</label>
          <input
            type="text"
            className="field"
            name="_replyto"
            placeholder="john.smith@example.com"
          />
          <label for="message">Message</label>
          <textarea className="field" name="message" placeholder=""></textarea>
          <input type="submit" name="submit" value="Submit" />
        </form>

        <Social />
        <Rights />
      </div>
    );
  }
}

export default Contact;

Rights.js

import React from "react";

const Rights = () => {
  <p id="rights">&copy; 2020 Chris Finazzo</p>
}

export default Rights;

我计划对社会部分做同样的处理，但这在一个例子中更容易显示出来。

Answer 1

使用圆括号返回JSX代码。

Rights.js

import React from "react";

const Rights = () => (
  <p id="rights">&copy; 2020 Chris Finazzo</p>
)

export default Rights;

并将组件导入为默认模块：

Contact.js

import React, { Component } from "react";
import { Link } from "react-router-dom";
import Rights from "path/to/your/component";

...