Javascript 如何使用React.cloneElement传递带有返回对象的函数属性？

我正在使用react路由器，它迫使我使用

react.cloneElement

将属性传递给我的孩子。我可以传递对象和函数，但我的问题是，我的一个函数有一个返回对象返回到父对象，这总是未定义的。该函数在父函数中触发，但它不接收我从子函数传递的对象

如果有人想编辑下面的示例代码，这里有一段JSFIDLE代码

从“React”导入React；
从“react dom”导入react dom；
const App=React.createClass({
render（）{
返回(
{this.getChildrenWithProps（）}
)
},
getChildrenWithProps（）{
返回React.Children.map（this.props.Children，（child）=>{
返回React.cloneElement（子级{
myFunction:this.myFunction
});
});
},
//注:
//这个想法是变量“newForm”应该被发送回App，我可以在子级中注销“newForm”，但在App中，它是未定义的。
myFunction（新形式）{
console.log（newForm）；//=>未定义的对象
}
});
const Child=React.createClass({
道具类型：{
myFunction:React.PropTypes.func，
myForm:React.PropTypes.object
},
render（）{
返回(
)
},
onChangeForm（formChanges）{
设newForm={
…这个.props.myForm，
…形式变化
}
//log（newForm）；=>这里我的newForm对象看起来不错
this.props.myFunction（newForm）；
}
});
const MyForm=React.createClass({
道具类型：{
变更形式：React.PropTypes.func.isRequired
},
render（）{
返回(
)
},
onChangeForm（值）{
this.props.changeForm（{something:value}）；
}
});

这很难理解，因为函数名不匹配。例如，

this.onSelectedOrigin

在

MyForm

@azium抱歉，我的错误。我对命名函数进行了编辑您是否正在尝试将回调传递给孩子？您只是将对象传递给

myFunction

，因此很难看到您计划如何将某些内容传递回父对象？是的，我只是将对象传递给

myFunction

，但在父对象中注销时，该对象是

未定义的

import React from "react";
import ReactDom from "react-dom";

const App = React.createClass({

    render() {
        return (
            <div>
                {this.getChildrenWithProps()}
            </div>
        )
    },

    getChildrenWithProps() {
        return React.Children.map(this.props.children, (child) => {
            return React.cloneElement(child, {
                myFunction: this.myFunction
            });
        });
    },
    // NOTE:
    // the idea is that the variable 'newForm' should be sent back up to App, I can log out 'newForm' in the Child, but here in App, it is undefined.
    myFunction(newForm) {
        console.log(newForm); // => undefined object 
    }

});

const Child = React.createClass({

    propTypes: {
        myFunction: React.PropTypes.func,
        myForm: React.PropTypes.object
    },

    render() {
        return (
            <form className="col-sm-12">
                <MyForm
                    changeForm={this.onChangeForm}
                    form={this.props.myForm} />
            </form>
        )
    },

    onChangeForm(formChanges) {
        let newForm = {
            ...this.props.myForm,
            ...formChanges
        }
        // console.log(newForm); => here my newForm object looks fine 
        this.props.myFunction(newForm);
    }
});

const MyForm = React.createClass({

    propTypes: {
        changeForm: React.PropTypes.func.isRequired
    },

    render() {
        return (
             <div>
                 <Input onChange={this.onChangeForm}>
             </div>
        )
    },

    onChangeForm(value) {
        this.props.changeForm({ something: value });
    }
});