无法在React中切换onclick事件

Question

我正在尝试构建一个树组件，并且能够让树显示....但是现在我想根据用户点击进行切换....但是我无法弄清楚如何做到这一点。 “setState”方法不是这个的一部分......这是未定义的......有人可以解释一下如何做到这一点。这是代码：

export function TreeComponent(props){

var instance = Object.create(React.Component.prototype)

instance.props = props;   

instance.render = function(){
    return <ul>
            <Tree data={props.data} />
            </ul>
}

return instance;


function Tree(props){

    if (!props.data.children){
        return (
                <li>
                <LeafNode data={props.data}/>                
                </li>
        )
    }

    return  (            
            <li><LeafNode data={props.data}/>
            <ul>{
                props.data.children.map(function(child){
                    return <Tree data={child} />
                })
            }
        </ul></li>
    )

    function LeafNode(props){

        function toggle(){

            props.data.showChildren = !props.data.showChildren;
            this.setState();/* <----------NOT WORKING */
        }

        var toggleImg = "";

        if (props.data.children){
            toggleImg = props.data.showChildren  ?"./images/colapse.png":"./images/expand.png"; 
        }            
        return (
                <div>
                <span className="toggle" onClick={toggle} >
                <img width="9" height="9" src={toggleImg} />
                </span>
                <a href="">{props.data.name}</a>
                </div>
        )
    }   
}

}

由于