如何将上下文传递给React / jsx视图?
我是React新手,我正在努力弄清楚一些基础知识。 在其他模板引擎(如EJS或Jade)中,当您在路由/控制器文件中呈现视图文件时,您可以传入上下文variables。 但是,我还没有find任何方式与React / jsx做到这一点。 我应该注意到我正在使用Express。
我实际上是不确定的,如果jsx是一个视图引擎,或者如果React莫名其妙内置。无论如何,我不知道如何将上下文从服务器传递到视图文件。
例如,如果我想加载configuration文件信息(存储在服务器/后端),我怎样才能把它传递给我的前端jsx视图文件在React / jsx?
这很简单。 MVC术语中有一个混乱,但我认为可以说React组件不仅仅是“视图”,而是“视图+控制器”。
作为模板引擎的直接类比,组件的render()
函数是您的模板。 而component.state
(对组件来说是本地的)和component.props
(从上层组件接收的参数)都可以用作“上下文”。
如果你想和JS世界的保守部分中的React组件类似的话,那就是Backbone的View
(如果我们使用原始的MVC术语,它也是view +控制器;正如我所说 – 这是一团糟)。 从概念上讲,这是一回事。 JSX用于render()
而不是EJS
(或其他),就是这样。
顺便说一句,React的context
概念是不同的。 把它看作是从context
暴露的组件开始的整个组件子树可见的道具。
例如,如果我想加载configuration文件信息(存储在服务器/后端),我怎样才能把它传递给我的前端jsx视图文件在React / jsx?
在最简单的情况下,你创build了顶层的React组件,它将加载你在mount( componentWillMount()
)上所需的东西,当你从服务器接收到响应( this.setState(...)
componentWillMount()
)时,把它放到它的本地state
this.setState(...)
),并在其render()
函数this.state
其状态元素( this.state
)传递给子组件作为道具( <List items={ this.state.items } />
)。
每当使用this.setState(...)
修改state
,整个组件子树就会再次呈现。 这是如何工作的。 在最简单的情况下。