如何从props中渲染数据

Question

我正在从json文件中获取图书数据

books= [{ id:'1', Name: 'abc', keywords: '['action', 'fiction']',....]

我对js书的反应代码是

import React from 'react';
const Book = (props) => {
  const { book } = props;
  return (
    <div className="col-md-4">
      <div className="card mb-4 shadow-sm">
          <h5>{ book.name }</h5>
          <div className="card-text">
            <p>{ book.keywords}</p>
          </div>
        </div>
      </div>
    </div>
  )
}

由于现在仅显示为数组，我如何呈现关键字的数据？ 输出：书名          关键字：['action'，'fiction']

必需的输出：书名                  关键字：动作，小说

Answer 1

这非常简单，您可以在图书数组中使用array.map：

代替：

<div className="card-text">
    <p>{ book.keywords}</p>
</div>

您可以使用：

  {this.props.books.map(book => // for each book, render...
      <div className="card-text">
        <p>{book.name}</p>
        {book.keywords.map(keyword => // for each keyword in array, render...
          <li>{keyword}</li>
        )}
      </div>
  )}

结果将是：

实时示例here。