Question

我是新来的人。我认为这是一个愚蠢的问题。我可以这样做吗？

this.setState({componentToLoad : MyComponent})

还是有任何“反应方式”动态加载组件

类似于jquery代码：

$(".container").load(url)

Answer 1

您的猜测是正确的。您不想将组件置于状态。动态加载组件的“反应方式”是根据状态有条件地渲染组件。例如：

import React, { Component } from 'react'

class Foo extends Component {
  state = {
    bar: false,
  }

  render () {
    return (
      <div>
        {this.state.bar 
          ? <p>True, bar.</p>
          : <p>Ain't so, bar.</p>
        }
      </div>
    )
  }
}

这里是文档： https://reactjs.org/docs/conditional-rendering.html

Answer 2

使用React Lazy进行代码拆分https://reactjs.org/docs/code-splitting.html

如何将React组件存储到状态？这样我就可以动态加载

2 个答案: