Question

我有 4 个对象的数组。我有从它返回 3 个随机值的函数。我的 javascript 代码正在运行，但我想在 JSX 中显示这些值。

const postLinks = [
  {
    link: "/link1",
    title: "Title 1",
  },
  {
    link: "/link2",
    title: "Title 2",
  },
  {
    link: "/link3",
    title: "Title 3",
  },
  {
    link: "/link4",
    title: "Title 4",
  },
];

  
const Home = () => {
    const threeLinks = () => {
      const resLinks = postLinks
        .sort(() => Math.random() - Math.random())
        .slice(0, 3);
      //console.log(resLinks)
      const finalRes = resLinks.map((item) => {
        return { itemTitle: item.title, itemLink: item.link };
      });
      console.log(finalRes);
      return finalRes;
    };
    threeLinks();
    return(
        <div>
            {finalRes}
        </div>
    )
}

我不能直接在 JSX 里面写 JS 函数。 ThreeLinks 功能的范围仅限于该功能。如何在 JSX 中获取 finalRes 值。

Answer 1

没有必要把它放在一个单独的函数中，但如果你愿意，最好把这个函数移到组件之外，至少只要它不依赖于任何 props。

如果你不能那样做，你似乎暗示，那么为什么要拥有一个功能呢？直接在组件中执行代码即可。

但更重要的是：你不能用 React 渲染普通对象。您实际上必须将数据映射到某些元素。

const postLinks = [{
    link: "/link1",
    title: "Title 1",
  },
  {
    link: "/link2",
    title: "Title 2",
  },
  {
    link: "/link3",
    title: "Title 3",
  },
  {
    link: "/link4",
    title: "Title 4",
  },
];

const Home = () => {
  const threeLinks = postLinks
    .sort(() => Math.random() - Math.random())
    .slice(0, 3);

  return (
    <div>
      {threeLinks.map(link => {
        // Create elements for the data.
        return <div>{`${link.title}: ${link.link}`} </div>
      })}
    </div>
  )
}

ReactDOM.render(<Home />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

您可能还想看看 How to get a number of random elements from an array?

Answer 2

Here 是代码的环境。

我认为您缺少对图书馆的引用，正如@Felix Kling 提到的那样。

除此之外，你正在做一些我不清楚的数据争吵。

import React from "react";

const postLinks = [
  {
    link: "/link1",
    title: "Title 1"
  },
  {
    link: "/link2",
    title: "Title 2"
  },
  {
    link: "/link3",
    title: "Title 3"
  },
  {
    link: "/link4",
    title: "Title 4"
  }
];

const getLinks = () => {
  const resLinks = postLinks
    .sort(() => Math.random() - Math.random())
    .slice(0, 3);

  return resLinks.map((item) => (
    <ul>
      <li key={item.title}>
        <a href={item.link}>{item.title}</a>
      </li>
    </ul>
  ));
};

const Home = () => {
  const result = getLinks();
  return <div>{result}</div>;
};

export default Home;

在 JSX 中使用函数

2 个答案: