javascript – ReactJS组件函数

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

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

解决方法

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

但是,您可以使用名为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：在组件的静态对象内定义的函数可直接作为静态函数使用.但是你必须记住它们是静态的,因为它们不是实例化组件对象的一部分,它们只是你可以在类上调用的函数.

反应的整个想法是组件尽可能独立.您永远不需要直接从组件外部访问组件实例函数,因为您应该做的只是更改组件的props并重新呈现它,以便在内部可以更改它.

这是一个例子：

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重新渲染将隐藏它,等等.结果相同,但带有props,这是反应方式.

javascript – ReactJS组件函数

解决方法

猜你在找的JavaScript相关文章