Javascript 如何使用setState和React将类保存在变量中

我想用从不同文件导入的整个类保存一个变量。变量是从实际类的构造函数中的setState方法保存的。问题是，它根本不会渲染任何东西。下面是一段代码：

import Timer from './App';

class Nuevo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            game: 1,
            timer: <Timer />
        }
    }
    setup = () => {
        return(
            this.state.timer
        );
    }
    render(){
        return(
            <span>{this.state.timer}</span>
        );
    }
}

从“/App”导入计时器；
类Nuevo扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
游戏：1，
计时器：
}
}
设置=（）=>{
返回(
这个。状态。计时器
);
}
render（）{
返回(
{this.state.timer}
);
}
}

我还尝试使用

this.timer=

在

this.state

方法之外，它根本不起作用。 （导入/导出

计时器

确实可以很好地工作，因为它以前已经渲染过了）

这就是我要做的

游戏

变量在整个游戏的各个部分之间变化。其中1是三个中的第一个。我正在为此使用条件渲染。问题出在别处

类

Nuevo

应该从导入调用

Timer

。然后，

Timer

保存在一个变量中，例如，不要每次重新渲染整个对象时都渲染一个新类（因为我将它划分为多个部分，每当更改部分时，

Timer

会重新渲染，而我只想像以前一样查看

Timer

）

谢谢你的帮助

如果我的样本中有什么不明白的地方，请询问，希望不要混淆

---

此外，我还考虑过修改整个代码，以便合并这两个类，但我真的想知道我所要求的是否可行，如果可行，如何做到

你不应该这样做。您应该始终返回组件，并最终在类的render方法中渲染它们

您可以管理组件的条件呈现：

您可以使用可用的生命周期方法管理状态，这些方法可以侦听应用程序中的更新：

---

如果您无法通过上述文档实现您想要实现的目标，我想知道：您想做什么更具体，为什么要这样做？

您永远不应该这样做。您应该始终返回组件，并最终在类的render方法中渲染它们

您可以管理组件的条件呈现：

您可以使用可用的生命周期方法管理状态，这些方法可以侦听应用程序中的更新：

---

如果您无法通过上述文档实现您想要实现的目标，我想知道：您想更具体地做什么，为什么？

因为我不太喜欢

，您不应该这样那样做，blablablabla…

回答，下面是您如何实现所需结果的示例

如果解决方案具有语言内功能，并且比其他解决方案更适合某个问题，那么我不明白为什么您不应该使用它，即使它不能满足一些

最佳实践

社区成员的要求。如果您正在与更大的团队合作，请确保此解决方案适合其他成员

答案的背景

基本的解决方案是使用

React.js

中的

React.cloneElement

-方法

下面是一个演示，如果您将

组件

保存为状态为

JSX

，则应在

cloneElement

-方法中将其作为

变量

使用，否则，如果您将其保存为状态为

变量

则使用方法内的

JSX

计数器部分

将

组件应用为
JSX

  // Initialize state object
  state = {
    timer: <Timer />
  };

  render() {
    return (
      <div className="App">{React.cloneElement(this.state.timer, {})}</div>
    );
  }

  // Initialize state object
  state = {
    timer: Timer
  };

  render() {
    return (
      <div className="App">{React.cloneElement(<this.state.timer />, {})}</div>
    );
  }

既然我不是
的粉丝，你就不应该这样那样做，布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉

如果解决方案具有语言内功能，并且比其他解决方案更适合某个问题，那么我不明白为什么您不应该使用它，即使它不能满足一些
最佳实践
社区成员的要求。如果您正在与更大的团队合作，请确保此解决方案适合其他成员

答案的背景

基本的解决方案是使用
React.js
中的
React.cloneElement
-方法

下面是一个演示，如果您将
组件
保存为状态为
JSX
，则应在
cloneElement
-方法中将其作为
变量
使用，否则，如果您将其保存为状态为
变量
则使用方法内的
JSX
计数器部分

将
组件应用为
JSX

  // Initialize state object
  state = {
    timer: <Timer />
  };

  render() {
    return (
      <div className="App">{React.cloneElement(this.state.timer, {})}</div>
    );
  }

  // Initialize state object
  state = {
    timer: Timer
  };

  render() {
    return (
      <div className="App">{React.cloneElement(<this.state.timer />, {})}</div>
    );
  }

我不认为这对我有帮助，因为我在stackoverflow上问过，因为那些教程对我帮助不大。我想做的是渲染
Timer
尽可能多，而不重置其中的内容。如果您希望“渲染”组件尽可能多。你可以通过我上面所说的来实现这一点。只需在render（）方法中呈现组件，然后通过激发onClick事件之类的操作（或其他任何操作），即可更新状态，使用上述状态生命周期方法检查要更新的状态，然后重新呈现。你现在的做事方式，根本不是做事的“反应方式”。别误会我的意思：你并没有给我们一个关于“为什么”的答案，你想这样做而不是“反应方式”。我不认为这对我有帮助，因为我在stackoverflow上问过，因为那些教程没有太大帮助。我想做的是渲染
定时器
我想要的，而不重置其中发生的事情