在React中管理嵌套组件中的状态

Question

我具有以下结构，其中在我的 $"SELECT * from SocoetyMaintan where Id='{DropDownList1.SelectedValue}';" 组件中，我试图接收支持更改headButtons中的状态的道具

• TitleContainer

  • headButtons.js
  • TitleContainer.js

• 个人资料详细信息

  • ProfileDetail.js

HeadButtons.js

ProfileDetail

并且我正在将此组件导入我的const HeadButtons = ({ action }) => { return ( <Buttons> <li> <Link to="#">Export</Link> </li> <li className="active"> <Link to="#" onClick={action}>Add</Link> </li> </Buttons> )}

TitleContainer

，并且在我的import HeadButtons from './HeadButtons' const TitleContainer = ({ title }) => { return ( <Container> <PageTitle> { title } </PageTitle> <HeadButtons /> </Container> ) } 中，我同时导入了两个组件。

UserProfileDetail

我不明白的是为什么我的组件TitleContainer无法执行export class UserProfileDetail extends Component { state = { ShowModal: false } openModal = () => { this.setState({ ShowModal: !ShowModal }) } <TitleContainer title={ userName } action={this.openModal} /> 来更改openModal的状态。

有什么方向吗？

Answer 1

在HeadButton中渲染TitleContainer组件时，您并没有传递动作作为道具。

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