React中如何更新子组件内容？点击更新IssueItems组件求助

看起来你已经搭好了父组件App的基础框架，接下来咱们一步步完善代码，实现点击操作更新子组件内容的功能：

1. 补全App组件的完整代码 #

首先我们要在App里加一个触发点击的按钮，同时确保正确把状态传递给子组件：

import React, { Component } from 'react';
import IssueItems from './IssueItems'; // 注意这里的文件路径要和你的项目结构匹配

class App extends Component {
  constructor(){
    super();
    this.state = {
      issues: [
        { title: 'Issue 1' }, // 先设置一些初始数据
        { title: 'Issue 2' }
      ],
    }
    this.update_description = this.update_description.bind(this);
  }

  update_description(){
    this.setState({
      issues: [
        { title: 'Issue 11' },
        { title: 'Issue 12' } // 可以多写几个示例数据方便测试
      ],
    })
  }

  render() {
    return (
      <div className="box-2">
        <h2> Issues </h2>
        {/* 添加按钮来触发更新操作 */}
        <button onClick={this.update_description}>更新Issue列表</button>
        {/* 将父组件的issues状态通过props传给IssueItems */}
        <IssueItems className="Iss" issues={this.state.issues} />
      </div>
    )
  }
}

export default App;

2. 编写IssueItems组件的渲染逻辑 #

IssueItems需要接收父组件传递的issues属性，然后把内容渲染出来：

import React from 'react';

const IssueItems = ({ issues }) => {
  return (
    <div className="issue-items-wrapper">
      {/* 遍历issues数组，渲染每个issue的内容 */}
      {issues.map((issue, index) => (
        <div key={index} className="issue-item">
          <h3>{issue.title}</h3>
          {/* 如果之后需要展示description，直接在这里加 <p>{issue.description}</p> 即可 */}
        </div>
      ))}
    </div>
  );
};

export default IssueItems;

关键细节说明 #

• 状态与props的联动：我们把issues状态放在父组件App中，通过props传递给子组件IssueItems。当父组件调用setState更新状态后，子组件会自动接收新的props并重新渲染，这是React中父子组件通信的常用方式。
• 点击事件的绑定：在constructor里绑定update_description方法，是为了确保方法内部的this指向App组件实例，这样才能正确调用setState更新状态。
• 列表渲染的key：渲染列表时给每个元素设置唯一的key，能帮助React更高效地识别DOM元素的变化，提升渲染性能。

如果你的项目里还有Issue这个中间组件（App -> Issue -> IssueItems），只需要在Issue组件里把issues props继续传递下去就行：

// Issue.js示例代码
import React from 'react';
import IssueItems from './IssueItems';

const Issue = ({ issues }) => {
  return (
    <div className="issue-container">
      <IssueItems issues={issues} />
    </div>
  );
};

export default Issue;

这样点击按钮后，App的状态更新，props层层传递下去，IssueItems就会自动显示新的内容啦！

内容的提问来源于stack exchange，提问作者ATT