Javascript 管理react中嵌套组件的状态

我有以下结构，其中在我的

headButtons

组件中，我试图接收一个道具来更改我的

ProfileDetail

• 标题容器
  • headButtons.js
  • TitleContainer.js
• 剖面详图
  • ProfileDetail.js

HeadButtons.js

const HeadButtons = ({ action }) => {
  return (
    <Buttons>
      <li>
        <Link to="#">Export</Link>
      </li>
      <li className="active">
        <Link to="#" onClick={action}>Add</Link>
      </li>
    </Buttons>
  )}

在我的

UserProfileDetail

Im中导入这两个组件

export class UserProfileDetail extends Component {

state = {
  ShowModal: false
}

openModal = () => {
  this.setState({
    ShowModal: !ShowModal
  })
}


<TitleContainer title={ userName } action={this.openModal} />

导出类UserProfileDetail扩展组件{
状态={
ShowModal:错误
}
OpenModel=（）=>{
这是我的国家({
ShowModal:！ShowModal
})
}

我不理解的是，为什么我的组件标题容器不能执行

openmodel

来更改

showmodel

的状态

---

任何方向？

在

标题容器

中呈现

标题按钮

组件时，您没有将动作作为道具传递给它

import HeadButtons from './HeadButtons'
const TitleContainer = ({ title, action }) => {
  return (
    <Container>
      <PageTitle>
        { title }
      </PageTitle>
      <HeadButtons action={action}/>
     </Container>
  )
}

从导入标题按钮。/HeadButtons'
常量标题容器=（{title，action}）=>{
返回(
{title}
)
}

我认为您没有绑定像

action={this.openModal.bind（this）}

@suresponnukalai这样的方法，我应该忘记其他东西，因为它不起作用。您必须在

TitleContainer

中接收操作并将其传递给

HeadButton

。

import HeadButtons from './HeadButtons'
const TitleContainer = ({ title, action }) => {
  return (
    <Container>
      <PageTitle>
        { title }
      </PageTitle>
      <HeadButtons action={action}/>
     </Container>
  )
}