Reactjs 是否有任何信号表明父组件';s状态集,然后是子组件';国家也设定了吗?

Reactjs 是否有任何信号表明父组件';s状态集,然后是子组件';国家也设定了吗?,reactjs,asynchronous,components,setstate,Reactjs,Asynchronous,Components,Setstate,当父组件设置状态(itemSelected:item)时,我也需要子组件设置状态(isShowForm:true),那么是否有任何信号或条件允许我这样做 <pre> //this is child Component class HeaderComponent extends Component { constructor(props) { super(props); this.state = { isShowForm: false, };

当父组件设置状态(itemSelected:item)时,我也需要子组件设置状态(isShowForm:true),那么是否有任何信号或条件允许我这样做

<pre>
//this is child Component
class HeaderComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isShowForm: false,
    };
  }

  handleEdit = () =>{
    if(any signal?){
      this.setState({isShowForm:true})
    }
  }
export default HeaderComponent;

//this is parent Component 
class Task extends Component {
  constructor(props){
    super(props);
    this.state = {
      itemSelected: null,
    }
  }
handleEdit = (item) => {
    this.setState({itemSelected: item})
  }
render() {

    let {itemSelected} = this.state;
return(
 HeaderComponent itemSelected={itemSelected}/>
)

</pre>

//这是子组件
类HeaderComponent扩展组件{
建造师(道具){
超级(道具);
此.state={
isShowForm:false,
};
}
handleEdit=()=>{
如果(有信号吗?){
this.setState({isShowForm:true})
}
}
导出默认HeaderComponent;
//这是父组件
类任务扩展组件{
建造师(道具){
超级(道具);
此.state={
itemSelected:空,
}
}
handleEdit=(项目)=>{
this.setState({itemSelected:item})
}
render(){
设{itemSelected}=this.state;
返回(
HeaderComponent itemSelected={itemSelected}/>
)

您可以将所需状态从父组件传递给子组件,并在子组件中使用
componentdiddupdate
lifecycle来收听道具并做出相应反应

class HeaderComponent扩展组件{
建造师(道具){
超级(道具);
此.state={
isShowForm:false,
};
}
componentDidUpdate(prevProps)=>{
//任何标识属性,以查看itemSelected对象是否确实已更改。我只是假设它具有唯一的ID
if(prevProps.itemSelected&&prevProps.itemSelected.id!==this.props.itemSelected.id){
this.setState({isShowForm:true})
}
}
导出默认HeaderComponent;
//这是父组件
类任务扩展组件{
建造师(道具){
超级(道具);
此.state={
itemSelected:空,
}
}
handleEdit=(项目)=>{
this.setState({itemSelected:item})
}
render(){
设{itemSelected}=this.state;
返回(
)
class HeaderComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isShowForm: false,
    };
  }

  componentDidUpdate(prevProps) =>{
    // Any identifying property to see if the itemSelected object has indeed changed. I'm just assuming that it has a unique ID
    if(prevProps.itemSelected && prevProps.itemSelected.id !== this.props.itemSelected.id) {
      this.setState({ isShowForm: true })
    }
  }
export default HeaderComponent;

//this is parent Component 
class Task extends Component {
  constructor(props){
    super(props);
    this.state = {
      itemSelected: null,
    }
  }
handleEdit = (item) => {
    this.setState({itemSelected: item})
  }
render() {

    let {itemSelected} = this.state;
return(
 <HeaderComponent itemSelected={itemSelected}/>
)