Question

我想尝试使用从不同文件导入的整个类来保存变量。变量是从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>
        );
    }
}

我还尝试过在this.timer = <new Timer />;方法之外使用this.state，但它根本不起作用。（Timer的导入/导出确实可以正常工作，因为它是以前渲染的。）

这就是我想要做的。

game变量会在整个游戏的各个部分之间变化。其中1是三个中的第一个。我为此使用条件渲染。问题出在其他任何地方。

类Nuevo应该从导入中调用Timer。然后，Timer被保存在变量中，例如每次我重新渲染整个对象时都不渲染新的类（因为我将它按部分划分，所以只要更改了部分，Timer就会进行渲染重新，当我只想像以前一样查看Timer时。

感谢您的帮助！

如果样本中的某些内容无法理解，请提出要求，以免混淆。

我还考虑过更改整个代码，以合并两个类，但是我真的想了解我所问的内容是否完全可行，以及如果可行的话，该怎么做。

Answer 1

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

您可以管理组件的条件渲染：

https://reactjs.org/docs/conditional-rendering.html。

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

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

Answer 2

由于我不是you should not do this and that, blablabla...答案的忠实拥护者，因此这里举例说明如何实现所需的结果。 https://codesandbox.io/s/nkx3lpp3rl

如果解决方案具有语言功能，并且比其他解决方案更适合解决问题，那么即使您不满意某些best practices社区成员，我也不明白为什么不应该使用它。只要确保您与更大的团队合作，便可以确定该解决方案适合其他成员。

答案背景

基本上的解决方案是使用React.cloneElement中的React.js方法。 read more about React.cloneElement

下面是一个演示，如果您将component保存为状态JSX，则应在variable方法中将其用作cloneElement，否则，如果保存为状态因为variable在方法内部使用了JSX计数器部分。

以component的身份应用JSX

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

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

以component的身份应用variable

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

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

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

2 个答案: