反应：从非所有者父组件中调用函数

Question

I know you can pass event handlers into children that are explicitly rendered by an owner component, like this:

var Owner = React.createClass({
    eventHandler: function() {
        console.log("Interaction!");
    },
    render: function() {
        return (
            <div>
                <input onChange={this.eventHandler}/>
                <button onClick={this.eventHandler}/>
            </div>
        );
    }
});

But what if I wanted to pass these functions from a parent component to its nested this.props.children ?

var Parent = React.createClass({
    eventHandler: function() {
        console.log("Interaction!");
    },
    render: function() {
        return (
            <span>
                {this.props.children}
            </span>
        );
    }
});
var Owner = React.createClass({
    render: function() {
        return (
            <div>
                <Parent>
                    <input onChange={whatDoIPutHere}/>
                    <button onClick={orDoIPutThisInTheParentIDK}/>
                </Parent>
             </div>
         );
});

I got something working by doing this:

var Parent = React.createClass({
    eventHandler: function() {
        console.log("Interaction!");
    },
    render: function() {
        var newChildren = this.props.children.map(child => {
            var newProps = {};
            if (child.type === 'input') {
                newProps.onChange = this.eventHandler;
            } else if (child.type === 'button') {
                newProps.onClick = this.eventHandler;
            }
            return React.cloneElement(child, newProps);
        });
        return (
            <span>
                {newChildren}
            </span>
        );
    }
});

But that requires me to hard-code which element types to look for, and which prop to pass eventHandler to. I want to be able to specify all that in the <Owner> component, and have <Parent> just be a generic container that's agnostic to how exactly its eventHandler gets called.

Is there any way to do this? I'd like to avoid any workarounds like getDOMNode() , because I'm expecting this codebase might be shared with React Native in the future.

Answer 1

Why not just generalize the different interaction methods, and just pass the type of interaction back up to the handler? Something like:

var cloned = React.Children.map(this.props.children, function (c) {
    return React.cloneElement(c, {
      onChange: this.props.onInteraction.bind(this, 'change'),
      onClick: this.props.onInteraction.bind(this, 'click')
    });
}, this);

That way you get notified of all clicks and changes (other types of interaction could be added to the list, too, like onKeyUp , onMouseMove , etc)

Link to jsbin example

Answer 2

Based on rossipedia's answer, I figured this out:

var Parent = React.createClass({
    eventHandler: function() {
        console.log("Interaction!");
    },
    render: function() {
        var newChildren = React.Children.map(this.props.children, child => {
            var newProps = {};
            for (var i in child.props) {
                if (child.props[i] === "onInteraction") {
                    newProps[i] = this.eventHandler;
                }
            }
            return React.cloneElement(child, newProps);
        });
        return (
            <span>
                {newChildren}
            </span>
        );
    }
});

which allows me to do this:

<Parent>
    <input onChange="onInteraction"/>
</Parent>

Not super elegant, but it works. Might be able to figure out something better with parent-based context once React 0.14 hits.