React 组件可以渲染存储在其状态中的另一个组件吗？

Question

我试图创建一个容器组件，它可能会随着时间的推移而改变其内部组件。

class Container extends React.Component {
    constructor(props) {
        super(props)
        this.state = { content: new FooComponent() }
    }
    render() {
        return <div>
            { this.state.content }
        </div>
    }
}

我收到如下错误：

对象作为 React 子对象无效（找到：带有键 {props, context, refs, updater, state} 的对象）。如果您打算渲染一组子项，请改用数组。

我试过{ [this.state.component] }，但得到同样的错误。

您是否可以将来自this.state 的组件放入从render() 返回的 JSX 中？如果没有，你如何实现一个容器？我正在考虑创建一个类似于 iOS 的 UINavigationController 的容器，我可以在其中推送和弹出堆栈中的组件，而只有顶部的组件呈现到屏幕上。

Answer 1

你可以使用JSX:this.state = { content: <FooComponent/> }

幕后React.createElement()。

class Container extends React.Component {
    constructor(props) {
        super(props)
        this.state = { content: <FooComponent/> }
    }
    render() {
        return <div>{this.state.content}</div>;
    }
}

或参考Creating React Elements。

这里有更易读的表格供参考：

class Container extends React.Component {
  state = {
    content: <FooComponent />
  };

  render() {
    return <>{this.state.content}</>;
  }
}

function Container() {
  const [content, setContent] = useState(<FooComponent />);

  return <>{content}</>;
}

Answer 2

一个 React 组件可以渲染另一个存储在它的 state 中的组件吗？

是的，你可以！

有两种方法

1

import FooComponent from '..'

...
this.state = {
    content: <FooComponent/>
}
...
render(){
    return (
        <div>{this.state.content}</div>
    )
}

或

2

import FooComponent from '..'

...
this.state = {
    content: FooComponent
}
...
render(){
    const {
        content: BarComponent
    } = this.state

    return (
        <div>
            <BarComponent />
        </div>
    )
}

我收到如下错误：

对象作为 React 子对象无效（找到：带有键 {props, context, refs, updater, state} 的对象）。如果您打算渲染一组子项，请改用数组。

• 发生这种情况是因为当您执行new FooComponent() 时，它会返回一个对象并且您无法渲染对象。
• 当使用 JSX 时，将被转译为 React.createElement(FooComponent) 并且这是可渲染的。
• 当仅使用FooComponent 时，您存储对它的引用，并且仅在渲染方法中创建一个将变为React.createElement(BarComponent) 的 JSX

当组件来自 props 时，第二种方法很好，你根据情况想给它一些 props。

工作Example

Answer 3

主要问题可能已经回答there。

注意：功能有限 - 仅存储组件将是一个简单的无状态视图/屏幕堆栈/缓冲区。

问题可能更广泛。此解决方案不等于保存以前的状态、更改……没有道具/参数、没有历史记录、没有上下文、状态反转……但是共享公共状态（redux 存储）可能是一个优势 - 没有旧状态，自动更新整个存储视图链。

Answer 4

class Container extends React.Component {
 constructor(props) {
    super(props)
    this.state = { content: this.FooComponent() }
  }

 FooComponent(){
  return(<FooComponent/>)
 }

render() {
    return <div>
        { this.state.content }
    </div>
 }
}