ReactJS組件功能

仍然有關於ReactJS的愚蠢問題=）是否有任何方法將公共函數添加到React組件？我試圖做這樣的事情：ReactJS組件功能

var LoginForm = React.createClass({ 
    getInitialState: function() { 
    }, 
    render: function() { 
    }, 
    MyFunc: function() { 
    } 
}) 
... 
var login_form = LoginForm({}); 
React.renderComponent(login_form, document.body); 
... 
login_form.MyFunc(); <-- error

你能解釋什麼請我做錯了嗎？

來源

2014-10-05 KaronatoR

您不應該在組件本身之外使用組件的方法（或通過將其作爲回調傳遞給子組件）。您應該將這些視爲私人方法。

但是，您可以使用名爲statics的React功能來提供爲可從組件外部獲得的功能。但是，這些應該像一個類的靜態函數一樣對待，因此他們無法訪問組件實例的內部（例如this.props或this.state）。

下面是一些靜態設置的組件的例子：

var Component = React.createClass({ 
    statics: { 
     // these functions are available outside the component 
     renderToBody: function() { 
      React.renderComponent(
       <Component />, 
       document.body 
      ); 
     } 
    }, 

    // cannot access this function outside the component 
    getHelloWorld: function() { 
     return 'Hello World!'; 
    }, 

    render: function() { 
     return (
      <div>{this.getHelloWorld()}</div> 
     ); 
    } 
});

所以，如果我們稱之爲React.renderComponent(Component({}), elem)然後組件將渲染elem但由於靜態的，你可以叫Component.renderToBody()，它會直接呈現組件到<body>元素。

IE：組件的statics對象中定義的函數可直接作爲靜態函數使用。但是你必須記住它們是static，它們是而不是實例化組件對象的一部分，它們只是你可以在類中調用的函數。

與反應的整個想法是組件儘可能獨立。您不應該直接從組件外部訪問組件實例函數，而應該改變組件的道具並重新渲染它，以便在內部更改。

這裏有一個例子：儘管您可能已經創建的組件上的一個方法show()代替

var Component = React.createClass({ 
    propTypes: { 
     // always get in the habbit of using propTypes! 
     message: React.PropTypes.string.isRequired, 

     show:  React.PropTypes.bool 
    }, 
    render: function() { 
     return (
      <div style={{display: this.props.show ? 'block' : 'none'}}> 
       {this.props.message} 
      </div> 
     ); 
    } 
});

（這樣你就可以做component.show(true)或component.show(false)顯示/隱藏 - 你，而不是把它作爲一個屬性對於同樣的結果。

調用React.renderComponent(Component({message: 'foo', show: true}), elem)將呈現組件可見，重新渲染與show: false將其隱藏，等結果相同，但與道具，這是反應的方式。

來源

2014-10-05 13:10:37

非常感謝Mike，你幫了我很多！我能問最後一個問題嗎？據我瞭解，我可以將許多組件安裝到一個節點上？所以我可以叮them他們？例如，如果我裝備了3個可靠的配件，然後想隱藏第二個配件。 – KaronatoR 2014-10-05 15:52:19

您只能在給定的html元素上安裝一個組件。但是，處理多個組件的最佳方法之一是安裝一個父組件，然後將其他所有需要的東西放在該父組件的子組件中。但是，您可以迭代和裝載同一組件的多個實例。在反應中，這很簡單，就像迭代和推入組件到一個數組，然後在一個組件的'render'函數內渲染數組，例如'

{yourArray}

' – 2014-10-05 16:15:45

簡單的答案是LoginForm（{}）不返回組件。它返回一個描述符對象，React將在稍後使用它來實例化組件。有兩種方法可以訪問實際的組件：通過給分量ref=name道具

作爲this組件中的方法
;實際的組件將在創建者中可用，如this.refs。名稱到創建者的componentDidMount執行時爲止。

http://facebook.github.io/react/docs/more-about-refs.html

來源

2014-10-11 11:11:36 Eduardo

有可能使用該渲染函數的結果：

var login_form = React.renderComponent(LoginForm({}), document.body); 
login_form.MyFunc(); 
login_form.setProps({loaded: true});

的應用案例，這是你可以調用根組件上setProps（但僅在根）。

來源

2014-10-28 18:47:42 zbyte

ReactJS組件功能

回答

相關問題