有沒有辦法讓模板有反應

我已經構建了一種模板類型的元素。（例如，在頂部具有圖像的縮略圖容器以及在它們之間具有動態內容的頁腳中的某些內容）動態內容可以是基於狀態的不同類型的DOM元素。我在添加了「注入」動態部分的渲染方法中添加了邏輯。這是否有意義（在render方法中返回不同的反應組件）？有沒有更好的模板方法？（我不是尋找一個添加此功能的項目，想知道是否有一個「反應的方式」這樣做感謝有沒有辦法讓模板有反應

編輯：！這裏我指的是代碼（CoffeeScript的）：

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

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

的internalContent()方法是動態地添加一些組件作出反應基於道具

來源

2016-08-11 Roy Zinn

是的，這是有道理的。如果您要發佈代碼，向您提供具體建議會更容易 - 但這是常見做法。 –

你能發佈你的代碼嗎？ – Aaron

我想你在描述HOC的反應。看他們 – Deadfish

這是作出反應的方式..你應該利用它來定位特定的域。

例如，在按鈕反應庫爾D是這樣寫的：

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的訣竅是創建小型可重用組件並將它們組合起來。

您還可以創建一堆組件，您可以在許多項目中使用這些組件。

來源

2016-08-11 21:34:01 webdeb

嗨@webdeb。感謝您的回覆。這對我來說很有意義。如果你看看我編輯過的問題（我已經添加了代碼），那麼我指的是我在'render'方法中的邏輯，在你的例子中，你的'main'中有邏輯方法（代替'

@RoyZinn是的，你可以這樣做，當你覺得渲染的標記/代碼可以在其他地方重用時，你可以創建一個獨立組件.. – webdeb

有沒有辦法讓模板有反應

回答

相關問題