Question

我正在创建一个React应用程序，我需要用原始HTML包装很多组件。他们没有状态或传递道具，我这样做所以所有东西都可以包裹在路由器中，这样链接就可以在点击时正确呈现某些组件。

换句话说，这......

<div class="foo">some text</div>
<div class="bar">some more text</div>

成为了这个。

export const Foo = () => (
  <div className="foo">some text</div>
)

export const Bar = () => (
  <div className="bar">some more text</div>
)

然后，名为App.js的文件就是这样：

export const App = createClass({
  render() {
    return (
      <div className="App">
        <Foo />
        <Bar />
        <SomecomponentWithprops />
      </div>
    )
  }
})

这确实有效，并且按照我需要的方式正确地包装了<Router />中的所有内容，但这似乎不对。只是想知道是否有最佳实践/更有活力的方式？

Answer 1

这是要走的路。如果您只想在某些路线上显示某些内容，则必须将其拆分为不同的组件，如您所见。

React组件中真的是静态HTML

1 个答案: