Javascript React-更改状态不更新从变量呈现的元素

因此，我在变量

const span={this.state.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>
    )
  }
}

类应用程序扩展了React.Component{
状态={
短信：“嘿”
}
span={this.state.text}
render（）{
返回(
{this.span}
状态：{this.State.text}
{this.setState（{text:'hello'}}}>Update
)
}
}

因此，即使在更新状态之后，跨度也具有状态的初始值。有没有办法让这一切充满活力？我是这里的新手

示例代码Sandbox-
span
变量未处于状态，因此无法对更改做出反应。试试这个


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>
    )
  }
}


类应用程序扩展了React.Component{
状态={
短信：“嘿”
}
render（）{
返回(
{this.state.text}
状态：{this.State.text}
{this.setState（{text:'hello'}}}>Update
)
}
}

或创建新组件并将文本作为道具传递：

const SpanComponent = ({txt}) => {
   return <span>{txt}</span>
}

const span组件=（{txt}）=>{
返回{txt}
}

然后在组件中使用它

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


状态：{this.State.text}
{this.setState（{text:'hello'}}}>Update

根据您的代码
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>
    )
  }
}

使用
shouldComponentUpdate
lifecycle方法可以实现以下功能：-

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>
    )
  }
}

类应用程序扩展了React.Component{
状态={
短信：“嘿”
}
span={this.state.text}
shouldComponentUpdate（下一步，下一步状态）{
this.span={nextState.text}
返回true；
}
render（）{
返回(
{this.span}
状态：{this.State.text}
this.setState（{text:'hello'}）}>Update
)
}
}

方法太多了。很高兴知道为什么它们都能工作。了解它们的工作意味着理解JavaScript（这里特别是ES6类）和React（这里特别是类组件），您应该阅读React钩子，在这种情况下使用状态

import React, { useState } from "react";

const App = () => {
  const [text, setText] = useState();

  return (
    <>
      <div>
        <div>State: {text}</div>
        <button onClick={() => setText("hello")}>Update</button>
      </div>
    </>
  );
};

export default App;

import React，{useState}来自“React”；
常量应用=（）=>{
const[text，setText]=useState（）；
返回(
状态：{text}
setText（“hello”）}>更新
);
};
导出默认应用程序；

查看第9行。Var
span
未处于状态，
text
处于状态。谢谢。。！我最终使用了您的函数
renderspan（）
。很好用！
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>
    )
  }
}

import React, { useState } from "react";

const App = () => {
  const [text, setText] = useState();

  return (
    <>
      <div>
        <div>State: {text}</div>
        <button onClick={() => setText("hello")}>Update</button>
      </div>
    </>
  );
};

export default App;