相关疑难解决方法(0)

我很难将动态事件附加到我的反应组件.我有以下组件:

var ListItem = React.createClass({
    render: function() {
        return (
            <li className="selector" >
                <div className="column">
                    <h2 className="commentAuthor">
                        {this.props.author}
                    </h2>
                    <div>{this.props.children}</div>
                </div>
            </li>
        );
    }
});

var ListBox = React.createClass({
    mixins : [MyMixin],

    render : function() {
        this.nodes = this.props.data.map(function(item) {
            return <ListItem author={item.author}>{item.text}</ListItem>;
        });
        return (
            <ul id="columns">
                {this.nodes}
            </ul>
        );
    }
});

如您所见,ListItem的className设置为"selector".基于这个"选择器",我想查询节点并在MyMixin中动态附加事件.

React.renderComponent(
    <ListBox data={data} selector="li.selector" />,
    document.getElementById('example')
);

也许我的想法完全错了,因为我对React不熟悉.

问候

我有一个自定义组件Foo,其bar功能我想从外部触发:

class Foo extends React.Component {
   bar() { ... }
}

我绘制Foo了一起button,其目的是触发Foo.bar():

render() {

 return (
     <Foo ...>
     </Foo>
     <Button onClick={I want to trigger Foo.bar()} />
 );
}

我尝试过的事情:

1. 移动<Button >里面Foo,然后加入onClick的<Button/>在Foo's构造-鼠标点击的结合没有工作-我看它重视,但<Button />仍然不会触发onClick.(或者,如果它可以工作,如何正确地做到这一点)？

没有做我想要的解决方案:

1. 我看到一个可能的解决方案,它建议在整个过程中听一下点击MyComponent,然后做一些DOM查询以查找是否点击了实际的按钮.这不会对我的工作,但是,由于MyComponent它不拥有这些按钮(这些按钮都没有MyComponent.props.children),我宁愿一个集思广益的解决方案,不强迫我一定要移动内部的按钮.

2. 另一个潜在的解决方案不起作用:我不能render()将值返回<MyComponent />到a var myComp,然后在里面<Button onClick={() …