Question

我正在创建一个webapp，我将有多个＆＃39;规范＆＃39;在前端，其数量是通过后端数据库的响应确定的。我想要的是为每个规范创建一个React Route。我想动态地这样做，这样如果我在后端数据库中添加更多规范，那么我就不必在前端添加一堆硬编码路由来匹配。

我使用Jumpsuit作为React / Redux包装器。对于规范，我查询后端并将规范存储在状态数组中。我可以从状态获得这个规范数组没有问题，但是，如果我尝试根据这个规范数组（每个规范的一个路由）动态创建路由，那么它就不会创建它们。

以下是我的代码（减去导入）。目前我只是尝试给每条动态路线提供相同的规格。组件，只是一个非常简单的组件，可以呈现几个单词。我创建了一些按钮，可以在点击时导航到这些路线，但是当我点击它们时，网址会更改为正确的路线，但页面根本没有变化。如果我将主要组件的道具打印到控制台并查看路线，我可以看到动态的那些不在那里。我没有收到任何控制台错误。

#version 430
in vec4 frag_color;
in vec4 gl_FragCoord;
flat in int frag_pick_index;

out vec4 color;

layout (std430, binding = 0) buffer mouse_color { int pick_index; float depth_value; };

uniform int mouse_x;
uniform int mouse_y;
uniform sampler2D main_texture;

void main(void)
{       
    if (int(gl_FragCoord.x) == mouse_x && int(gl_FragCoord.y) == mouse_y) {
        if (gl_FragCoord.z < depth_value) 
        {
            pick_index = frag_pick_index;
            depth_value = gl_FragCoord.z;
        }
    }

    // pick_index = textureSize(main_texture, 0).y;

    if (int(gl_FragCoord.x) == mouse_x || int(gl_FragCoord.y) == mouse_y) {
        color = vec4(0.0f, 1,0,1.0f);
    } else {
        color = frag_color;
    }

    color = texture(main_texture, vec2(0.5f, 0.5f));
}

我不确定我是否会以错误的方式解决这个问题，但如何为状态数组中的每个值创建一个Route组件？

Answer 1

您可以实际使用动态路由并创建可动态呈现规范的包装器组件，而不是为每个规范创建路由。包装器可以做很少的事情，甚至只是一个div标签。或者它可以是一个非常模板，如博客页面，除了文章内容之外，它具有所有样式。这取决于您的每个规范的差异

现在我们看看路线，它可以简化为

RecurringJob.AddOrUpdate<ITestClass2>("JobTitle", x => x.DoAJob(), Cron.MinuteInterval(5));

然后在 Spec 组件中，您可以执行

之类的操作

<Router history={browserHistory}>
  <Route path='/' component={App}>
    <IndexRoute component={Home}/>

    <Route path='/account' component={Account}/>
    <Route path='/quizzes' component={QuizRoot}/>
    <Route path='/specs/:spec' component={Spec} />
  </Route>
</Router>

根据状态创建动态React Route组件

1 个答案: