ReactJS组件函数

ReactJS component functions

本文关键字：函数 组件 ReactJS      更新时间：2023-09-26

仍然有关于ReactJS=的愚蠢问题）有没有办法将公共函数添加到React组件中？我正在尝试制作这样的东西：

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

你能解释一下我做错了什么吗？

您不应该在组件本身之外使用组件的方法（或将其作为回调传递给子组件）。您应该将这些方法视为私有方法。

但是，您可以使用React的一个名为statics的功能来提供在组件外部可用的功能。然而，这些函数应该被视为类的静态函数，因此它们无法访问组件实例（如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，因为它们是实例化组件对象的而不是部分，它们只是您可以在类上调用的函数。

react的整个理念是组件尽可能地独立。您永远不应该直接从组件外部访问组件实例函数，因为您应该做的只是更改组件的道具并重新渲染它，以便在内部进行更改。

这里有一个例子：

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>
        );
    }
});

而您可能已经在组件上创建了一个方法show()（这样您就可以执行component.show(true)或component.show(false)来显示/隐藏），而是将其作为相同结果的属性进行传递。

调用React.renderComponent(Component({message: 'foo', show: true}), elem)会使组件可见，使用show: false重新渲染会隐藏它，等等。结果相同，但使用道具，这是反应方式。

简单的答案是LoginForm（｛｝）不返回组件。它返回一个描述符对象，React稍后将使用该对象来实例化组件。有两种方法可以访问实际组件：

  • 作为分量方法中的this
  • 通过给予该组件CCD_ 16道具；在创建者的componentDidMount执行时，实际组件将在创建者中可用，如this.refs.name

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

通过使用渲染函数的结果：

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

这方面的用例是，您可以在根组件上调用setProps（但仅在根上）。

相关文章：