Question

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

这是我的第一个几乎任何大小的Node应用程序，其工作方式似乎与Ruby的Liquid语法有所不同，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

使用圆括号返回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";

...

错误：版权（...）：渲染未返回任何内容

1 个答案: