Question

我构建了一个模板元素。（例如，缩略图容器，顶部是图像，页脚中有东西，它们之间有动态内容）动态内容可以是基于状态的不同类型的DOM元素。我通过在render方法中添加逻辑来“注入”动态部分。这是否有意义（在render方法中有逻辑，返回不同的反应组件）？有更好的模板方法吗？（我不是在寻找能够增加这种能力的项目，想知道是否有“反应方式”这样做。谢谢！

编辑：这是我所指的代码（coffeescript）：

internalContent: ->
  switch @props.title
    when "title1" then SomeReactFactory(props)
    when "title2" then SomeOtherReactFactory(props)

render ->
  ...
  DOM.div
    className: 'panel'
    @internalContent()

internalContent()方法是根据prop

动态添加一些React Component

Answer 1

这是React的方式..你应该利用它来定位你的特定领域。

例如，React中的Button可以这样写：

const MyButton = ({ text, type = "normal", color = "blue", onClick }) => {
   return (
      <button
        onClick={onClick}
        style={{backgroundColor: color }} 
        className={"my-button my-button--type" + type}>
           {text}
     </button>);
};

或布局组件：

const MyLayout = ({side, nav, main}) => {
   return (
      <div className="container">
        <nav>{nave}</nav>
        <aside>{side}</aside>
        <div className="main">{main}</div>
      </div>
   )
}

现在你可以合成它，例如：

class App extends Component {
  ...

  render() {
    <MyLayout
       nav={<MyNav/>}
       side={<MySideBar items={...} />}
       main={<MyButton onClick={this.onClick} text="Main Button"}
    />
  }
}

不要试图将所有内容打包在一个可以完成所有事情的大型组件中，React中的技巧就是制作小型可重用组件并将它们合成。

您还可以创建一组可以在许多项目中使用的组件。

有没有办法让模板做出反应

1 个答案: