如何用<Link>构建一个使用循环反应的句子？

Question

我想在网上把这个打印出来。

通过创建一个帐户强制，你同意ArticleA，ArticleB，ArticleC，.ArticleX。

其中链接是来自material-ui的组件。

const createTACLine = (article, isMandatory) => {
  let cline = '';

  if (isMandatory) {
    cline = cline + '[Mandatory] By creating an account, you agree to ';
  }
  Object.keys(article).forEach(function (key) {

    cline = cline +  <Link
        component="button"
        variant="body2"
        to="/"
    > +{article[key].name}+ </Link>;
    if (parseInt(key) !== article.length - 1) {
      cline = cline + ', ';
    }

  });

  cline = cline + ".";

  return cline;
};

这里的文章

{
    "id": 12,
    "name": "ArticleA",
    "url": "http://.....",
},
{
    "id": 13,
    "name": "ArticleB",
    "url": "http://.....",
},
{
    "id": 13,
    "name": "ArticleC",
    "url": "http://.....",
},
{
    "id": 14,
    "name": "ArticleX",
    "url": "http://.....",
}

相反，我得到了以下信息。

通过创建帐户强制，您同意对象对象、对象对象。

我看到了很多例子使用推推列表项目，但我需要在这里建立一个句子。是否有其他方法可以使用循环构建字符串？

Answer 1

试一试：

  createTACLine = (article, isMandatory) => {
    return (
      <div>
        {isMandatory ? "[Mandatory] By creating an account, you agree to " : ""}
        {article
          .map(art => {
            return (
              <Link component="button" variant="body2" to={art.url}>
                {art.name}
              </Link>
            );
          })
          .reduce((prev, curr) => [prev, ", ", curr])}
      </div>
    );
  };

Answer 2

看起来，您正在将数组传递给字符串，但真正需要的是提取项目名称。

下面是一个实用的沙箱：https://codesandbox.io/s/friendly-feather-ihoh4

工作代码：

import React from "react";
import ReactDOM from "react-dom";
import Link from "@material-ui/core/Link";

import "./styles.css";

const article = [
  {
    id: 12,
    name: "ArticleA",
    url: "http://....."
  },
  {
    id: 13,
    name: "ArticleB",
    url: "http://....."
  },
  {
    id: 13,
    name: "ArticleC",
    url: "http://....."
  },
  {
    id: 14,
    name: "ArticleX",
    url: "http://....."
  }
];

class App extends React.Component {
  createTACLine = (article, isMandatory) => {
    let cline = "";

    if (isMandatory) {
      cline = cline + "[Mandatory] By creating an account, you agree to ";
    }

    article.forEach((art, index) => {
      if(index === 0){
        cline = cline + art.name
      } else {
        cline = cline + ", " + art.name
      }

    });

    return (
      <Link component="button" variant="body2" to="/">
        {cline}
      </Link>
    );
  };

  render() {
    return <div>{this.createTACLine(article, true)}</div>;
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 3

这里的文章似乎是一组对象。试一试

article.forEach(obj => {
 // your Link with obj.name
})