将方法作为props传递给所有孩子

IT技术 reactjs
2021-05-05 02:59:32

试图将方法作为props传递给所有孩子。但是在控制台中打印子props时,它显示未定义。

控制台输出:

Object {openLightbox: undefined, closeLightbox: undefined, setLightboxState: undefined, key: 0}   

将 openLightbox、closeLightbox 和 setLightboxState 方法作为props传递给所有孩子。在变量 childProps 中设置它。

var Lightbox = React.createClass({

    getInitialState: function(){
        return { display: false };
    },

    componentWillMount: function(){
        if (this.props.data)
            this.setState(this.props.data);
    },

    openLightbox: function(){
        this.setState({display: true});
    },

    closeLightbox: function(){
        this.setState({display: false});
    },

    setLightboxState: function(obj){
        this.setState(obj);
    },

    render: function(){
        var childrenWithProps = this.props.children.map(function(child, i) {
            var childProps = {
                openLightbox: this.openLightbox,
                closeLightbox: this.closeLightbox,
                setLightboxState: this.setLightboxState,
                key: i
            };
            console.log(childProps)
            for (var j in this.state){
                childProps[j] = this.state[j];
            }

            var childWithProps = React.cloneElement(child, childProps);

            return childWithProps;
        });

        return (
            <div>
                {childrenWithProps}
            </div>
        );
    }
});
2个回答

this.map指全球范围内(在浏览器,它是window或者undefined如果你使用strict mode),那里有没有方法 openLightboxcloseLightbox等您可以设置this.map通过第二个参数

this.props.children.map(function(child, i) {
  ...
}, this);
___^^^^_

this.props.children最适合你不应该直接迭代,React 有一个顶级 API 用于映射 this.props.children( https://facebook.github.io/react/docs/top-level-api.html )。

然后 map 中的函数将具有windowundefinedas this,因此您应该使用箭头函数(ES2015 中的=>)或 .bind(this) 将 React Component 实例链接到this

var childrenWithProps = React.Children.map(this.props.children, function(child) { ... }.bind(this))