获得预期的赋值或函数调用，而是在尝试在 React 中呈现组件时看到表达式 no-unused-expressions 错误

Question

我正在尝试根据items对象中的items数呈现Card组件，但在第 6 行出现错误。

import React from "react";
    export class Cards extends React.Component {
      render() {
        let elements = [];
        elements = this.props.items.map(item => {
          <Card titles = {item.title} imgsrc = {item.urlToImage}
          discr = {item.description} urls = {item.url}
          />
        })
        return (
          {elements}
        );
      }
    }

这是Card组件：

import React from 'react'
export default ({titles, imgsrc, urls, discr}) => {
  return (
    <div className="cards">
        <div className="card">
          <div className="cardHead">
            <h4>{titles}</h4>
          </div>
          <div className="cardBody">
            <img src={imgsrc} alt="pst-img" />
          </div>
          <div className="cardFooter">
            <p>{discr}</p>
            <a className="buttn" href={urls}>
              <button>Read More</button>
            </a>
          </div>
        </div>
      </div>
    )
 }

Answer 1

您没有在.map返回 JSX，您需要这样做：

import React from "react";
    export class Cards extends React.Component {
      render() {
        let elements = [];
        elements = this.props.items.map(item => {
         return <Card titles = {item.title} imgsrc = {item.urlToImage}
          discr = {item.description} urls = {item.url}
          />
        })
        return (
          {elements}
        );
      }
    }

或者以更清洁的方式：

import React from "react";
    export class Cards extends React.Component {
      render() {
        return (
         {this.props.items.map(item => {
         return <Card titles = {item.title} imgsrc = {item.urlToImage}
          discr = {item.description} urls = {item.url}
          />
        })}
        );
      }
    }

Answer 2

作为第一个答案，您需要在map()返回 JSX

或者在map()使用( )而不是{}

像这样

import React from "react";
    export class Cards extends React.Component {
      render() {
        return (
         {this.props.items.map(item => (
         return <Card titles = {item.title} imgsrc = {item.urlToImage}
          discr = {item.description} urls = {item.url}
          />
        ))}
        );
      }
    }