Question

仍然有关于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

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

Answer 1

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

但是，您可以使用名为statics的React功能来提供从组件外部可用的功能。但是，这些应该被视为类的静态函数，因此它们无法访问组件实例的内部（例如this.props或this.state）。 / p>

以下是组件的某些静态设置示例：

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，因为它们不是实例化组件对象的一部分，它们只是你可以在类上调用的函数。

反应的整个想法是组件尽可能独立。你永远不需要直接从组件外部访问组件实例函数，因为你应该做的只是改变组件的道具并重新渲染它，以便它在内部可以改变。

以下是一个例子：

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重新渲染将隐藏它，等等。结果相同，但使用道具，这是反应方式。

Answer 2

简单的答案是LoginForm（{}）不返回组件。它返回一个描述符对象，React将使用该对象稍后实例化该组件。您可以通过两种方式访问实际组件：

作为组件方法中的this
给予组件ref=name道具;在创建者的componentDidMount执行时，实际组件将在创建者中可用，作为this.refs。 name 。

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

Answer 3

可以使用渲染函数的结果：

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

这个用例是你可以在根组件上调用setProps（但只能在根目录上）。

ReactJS组件功能

3 个答案: