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组件功能

回答

相关问题