javascript - 通过类外函数(或替代方法)操纵状态

Question

希望你今天过得愉快。考虑到我是 React 的新手，我可能会因为这个问题稍微惹恼你。

设置如下:我的投资组合网站有一个“项目”页面，其中我展示了一个完整的项目，并在侧面显示了完整尺寸的图像和详细信息，在该页面下我列出了所有其他项目。一旦点击其中一个，特色项目就会改变。我敢肯定，对大多数人来说这是一件非常简单的事情，但我似乎被卡住了。

这是我目前的设置方式:

1. 在组件类之外的一个名为'projects'的数组来存储它们，一个项目如下所示:

  {
    key: 0,
    title: "Project title",
    description:
      "Lorem ipsum",
    details: [
      "...",
      "...",
      "..."
    ].map((detail, i) => <li key={i}>{detail}</li>),
    image: ImageObject
  },

1. 这个函数(在类的 render 方法中被引用)也在主要组件类之外，它为每个项目创建一个 div

function ProjectList(props) {
  const projects = props.projects;
  const projectItems = projects.map(project => (
    <div key={project.key}>
      <a href="#">
        <img src={project.image} alt={project.title} />
      </a>
    </div>
  ));

  return <div className="row">{projectItems}</div>;
}

render 方法中的引用是这样的:

<ProjectList projects={projects} />

1. 现在我们进入 Projects 类，其中有一个名为“currentProjectIndex”的状态值和一个“setProject”函数:

setProject = index => {
   this.setState({ currentProjectIndex: index });
 };

一切正常并正确显示，如果我手动编辑状态，它会显示相关项目，但我不确定如何在此处继续。我已经尝试将 onClick 属性添加到 div 和 a 标签，但似乎我无法在主类之外引用 setState，我认为这是有道理的，但如果在渲染方法中无法识别 ProjectList 函数，则我将它放在主类中。

我意识到这可能是一些非常基本的东西，但我有一种感觉，我可能完全错误地处理了这个过程，而且我走在了完全错误的轨道上。要么那样，要么我只是愚蠢，这两种情况都是完全可能的。无论哪种方式，我都非常感谢您的任何建议!

Answer 1

您可以尝试这样做:在单击事件调用 setProject 的位置添加一个按钮，并将索引(即 project.key，对吗？)作为参数传递。您可能还想添加一个 event.preventDefault。希望能帮助到你。这是代码:

setProject = (event, index) => {
   event.preventDefault();
   this.setState({ currentProjectIndex: index });
 };

function ProjectList(props) {
  const projects = props.projects;
  const projectItems = projects.map(project => (
    <div key={project.key}>
      <a href="#">
        <img src={project.image} alt={project.title} />
      </a>
      <button
          type='button'
          onClick={event => { this.setProject(event, project.key) }}
      >
      Select this project
      </button>
    </div>
  ));

  return <div className="row">{projectItems}</div>;
}