时间戳

首页 > 解决方案 > 反应 - 改变状态不更新从变量呈现的元素

javascript - 反应 - 改变状态不更新从变量呈现的元素

问题描述

所以，我将一个组件存储在一个变量const span = <span>{this.state.text}</span>中。现在，当我渲染这个元素并更新text状态时。该元素不会重新渲染。

所以这是我的代码

class App extends React.Component {
  state = {
    text: 'hey'
  }
  span = <span>{this.state.text}</span>

  render() {
    return (
      <div>
        {this.span}
        <div>State: {this.state.text}</div>
        <button onClick={()=>{this.setState({text: 'hello'})}}>Update</button>
      </div>
    )
  }
}

所以即使在更新状态之后，span 也有状态的初始值。有没有办法让这个动态？我是这里的新手。

标签： javascriptreactjs

解决方案

根据您的代码，一旦设置span的实例属性App将在组件的整个生命周期中保持不变，除非再次手动设置。您必须span在类似的内容中包含该 html 创建render：-

class App extends React.Component {
  state = {
    text: 'hey'
  }
  render() {
    return (
      <div>
         <span>{this.state.text}</span>
        <div>State: {this.state.text}</div>
        <button onClick={()=>{this.setState({text: 'hello'})}}>Update</button>
      </div>
    )
  }
}

这也是有效的：-

class App extends React.Component {
  state = {
    text: 'hey'
  }
  span = <span>{this.state.text}</span>
  render() {
    this.span = <span>{this.state.text}</span>
    return (
      <div>
        {this.span}
        <div>State: {this.state.text}</div>
        <button onClick={()=>{this.setState({text: 'hello'})}}>Update</button>
      </div>
    )
  }
}

以下具有其他类似功能的renderSpan内容也是有效的：-

class App extends React.Component {
  state = {
    text: 'hey'
  }
  renderSpan = function(){
    return <span>{this.state.text}</span>
  }
  render() {
    return (
      <div>
        {this.renderSpan()}
        <div>State: {this.state.text}</div>
        <button onClick={()=>{this.setState({text: 'hello'})}}>Update</button>
      </div>
    )
  }
}

以下是使用shouldComponentUpdate生命周期方法实现的：-

class App extends React.Component {
  state = {
    text: 'hey'
  }
  span = <span>{this.state.text}</span>

  shouldComponentUpdate(nextProps,nextState){
     this.span = <span>{nextState.text}</span>
     return true;
  }

  render() {
    return (
      <div>
        {this.span}
        <div>State: {this.state.text}</div>
        <button onClick={()=>this.setState({text:'hello'})}>Update</button>
      </div>
    )
  }
}

方法太多了。很高兴知道为什么所有这些都有效。了解它们的工作意味着理解JavaScript（这里特别是ES6 类）和React（这里特别是类组件）。

推荐阅读