Error: Rights(...): Nothing was returned from render

Question

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

这是我的第一个真正任何大小的 Node 应用程序，它的工作方式似乎与 Ruby 的 Liquid 语法有些不同，后者的导入我更熟悉一些。

应该怎么做？

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

对 return 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";

...

Error: Rights(...): Nothing was returned from render

Error: Rights(...): Nothing was returned from render

jsx

reactjs

react-component