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

Question

我正在尝试根据 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}
          />
        })}
        );
      }
    }