0

**我会先发布代码，然后解释我以后遇到的问题。

class ParentComponent extends Component {
  constructor() {
    super()

    this.state = {
      id: null,
    }
}

  render() {
    const dataTarged = "#col" + id
    const id = "col" + id
    return (
      <React.Fragment>
        <div>
          <button data-toggle="collapse" data-target={dataTarged} onClick={() => this.setState({ id: <<this id may vary>> })}>Click me</button>
        </div>

        <div className="collapse mt-4" id={id}>
          <ChildComponent id={this.state.id} />
        </div>
      </React.Fragment>
    )
  }
}



class ChildComponent extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.id != prevProps.id) {
      //do stuff with the ID
    }
  }
}

解释：

  1. 在 ParentComponent 我有那个折叠，在那个折叠上我使用 this.state.id （可能会有所不同）传递 ID。
  2. 单击时的那个按钮也会切换折叠并显示 ChildComponent 及其道具。

设想：

  1. ParentComponent 是“卡片”，我有多个具有不同 ID 的组件。
  2. 每当我单击按钮时，状态都会使用来自 ParentComponent 的新 ID 进行更新，并作为 props 传递给 ChildComponent。

我面临的问题：

如果我切换不同的 ParentComponents，则 ChildComponent 中的 componentDidUpdate 停止被调用并且 ID 不会更新。这意味着我需要使用该 ID 获取的信息不正确。

此外， ChildComponent 上的 render() 没有被调用，似乎因为它渲染了一次它不会再次渲染。

这就是问题所在，每次传递给 ChildComponent 的道具发生变化时都不应该调用 componentDidUpdate 吗？每次切换不同的 ParentComponent 时，我都会更改传递的道具。

提前谢谢，我希望我说清楚了

4

0 回答 0