Ошибка: Права (...): ничего не было возвращено из рендеринга

#reactjs #jsx #react-component

#reactjs #jsx #реагирующий компонент

Вопрос:

В моем приложении есть следующий код, который должен добавлять информацию об авторских правах внизу страницы. Однако, когда я пытаюсь импортировать компонент, либо ничего не возвращается, либо сам импорт выходит за рамки.

Это мое первое приложение 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">amp;copy; 2020 Chris Finazzo</p>
}

export default Rights;

Я планирую использовать тот же подход с социальным компонентом, но это легче показать на примере.

Ответ №1:

Используйте круглые скобки для возврата кода JSX.

Rights.js

 import React from "react";

const Rights = () => (
  <p id="rights">amp;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";

...