Reactjs React.js，为什么我的类组件没有'；重新启动元素，但功能组件可以工作吗？

我是react.js新手，只需按照教程操作即可。这是我的密码。首先，我尝试使用类组件“问候语”，让它在后面显示不同的单词 单击按钮，但我不知道出了什么问题，它不会重新引发元素，而且问候语的construtor（）方法只调用了一次。注释掉的代码功能组件“问候语”运行良好。不确定有什么区别：(

类GreetingGuest扩展React.Component{
render（）{
返回(
你好，客人，点击登录按钮！！！
);
}
}
类GreetingUser扩展React.Component{
render（）{
返回(
您已经登录，欢迎！！！
);
}
}
类。组件{
建造师（道具）{
超级（道具）；
log（'Greeting.state.is_logon='，props.is_logon=）；
this.state={is_logon:props.is_logon}；
}
render（）{
让welcome_msg=null；
if（此.state.is\u登录）{
欢迎光临；
}否则{
欢迎光临；
}
返回欢迎信息；
}
}
//功能问候（道具）{
//const is_logon=props.is_logon；
//如果（正在登录）{
//返回；
//    }
//返回；
//}
类LoginComponent扩展了React.Component{
构造器（道具）{
超级（道具）；
this.state={is_logon:false}；
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
this.setState（prevState=>({
is\u logon:！prevState.is\u logon
}));
}
render（）{
let button=null；
让问候语=null；
if（此.state.is\u登录）{
按钮=(
注销
);
问候语=
}否则{
按钮=(
登录
);
问候语=
}
返回(
{问候语}
{按钮}
);
}
}
ReactDOM.render(
,
document.getElementById（'Login'）
)

HTML:

---

老实说，我之前发布的答案是错误的。这是因为您发布问题的方式告诉我们，当添加基于函数的组件时，一切正常。然后，我使用您的代码创建了一个项目，并解决了代码中的一些问题

首先，您在redux外部本地维护状态。您将登录状态从父组件

LoginComponent

传递给名为Greeting的子组件，如下所示

greeting = <Greeting is_logon={this.state.is_logon} />

 render() {
      let welcome_msg = null;
      if (this.props.is_logon) {
          welcome_msg = <GreetingUser />;
      }else {
          welcome_msg = <GreetingGuest />;
      }
      return welcome_msg;
  }
}

然后确保从this.props访问值，而不是像这样访问任何本地状态对象

greeting = <Greeting is_logon={this.state.is_logon} />

 render() {
      let welcome_msg = null;
      if (this.props.is_logon) {
          welcome_msg = <GreetingUser />;
      }else {
          welcome_msg = <GreetingGuest />;
      }
      return welcome_msg;
  }
}

render（）{
让welcome_msg=null；
如果（此.props.is\u登录）{
欢迎光临；
}否则{
欢迎光临；
}
返回欢迎信息；
}
}

---

这就解决了问题。快乐编码！

类组件不重新呈现的原因是您已将构造函数中的

logged\u保存在
prop-in状态中，并且构造函数只被调用一次。此外，状态只能从组件内部修改

要解决此问题，您有2个选项

使用
组件将接收道具
，并使用新的
登录道具更新本地状态。
或者；不要使用状态，而是直接使用道具。
render（）{
让welcome_msg=null；
如果（此.props.is\u登录）{
欢迎光临；
}否则{
欢迎光临；
}
返回欢迎信息；
}

我认为您应该使用后者，因为父组件已经维护状态。
请解释原因。提供代码片段可能不会帮助询问者理解问题。谢谢。现在我可以说，当前的渲染方法没有问题，因此这可能无法解决问题。根据据我所见，Greeting组件中的render函数只返回一个JavaScript变量，我认为这可能会导致这个问题。return welcome_msg；它返回了，这是完全正确的，因为JSX只是语法糖：）是的，你可能是对的。我被误导了，他用函数组件解释它，说它工作正常。我猜他给按钮添加的一些有线逻辑会导致这个错误。谢谢@Koen.，所以我猜react.js rerender机制只是检查元素的类型是否已更改，以决定是否需要重新渲染元素。在我的代码中，LoginComponent返回相同的元素类型，因此react.js认为它不需要新建新元素，并继续使用第一个创建的问候语组件元素。
 render() {
      let welcome_msg = null;
      if (this.props.is_logon) {
          welcome_msg = <GreetingUser />;
      }else {
          welcome_msg = <GreetingGuest />;
      }
      return welcome_msg;
  }
}

componentWillReceiveProps(nextProps) {
  if (nextProps.logged_in !== this.state.logged_in) {
    this.setState({ logged_in: nextProps.logged_in });
  }
}

  render() {
      let welcome_msg = null;
      if (this.props.is_logon) {
          welcome_msg = <GreetingUser />;                 
      }else {
          welcome_msg = <GreetingGuest />;    
      }
      return welcome_msg; 
  }