Question

我正在使用ReactJS。我有一个嵌套的组件，如下所示：

我的componentParent.js：

import ComponentA {...}
 <div {some properties}> 
            <div 
              {some properties}>
            </div> 
            <ComponentA/>   
 </div>

我的componentA.js：

import ComponentB {...}
 foo.map{..} return (
 <div onClick={this.onClick}> 
              <ComponentB/>
</div>)

如果我直接显示组件B并将其onClick方法放在其中，则显示在componentA.js上：

import ComponentB {...}
 foo.map{..} return (
              <ComponentB onClick={this.onClick}/>
)

在第二种情况下，该方法拒绝在ComponentB上触发。我是否总是有义务将我的组件嵌套在Div中以便触发功能或直接在componentB上使用onClick的方法？任何提示都会很棒，

谢谢。

Answer 1

当您将“ onClick”传递给组件时，它就是一个道具。当您将其分配给普通的旧HTML元素（“ POHE”）时，React会将其转换为事件处理程序。您需要在某个地方将其分配给“ POHE”

第二版ComponentA：

import ComponentB {...}
 foo.map{..} return <ComponentB onClick={this.onClick}/>

如果您将<ComponentB>修改为在div或其他对象上调用onClick={this.props.onClick}，您会发现是这样的。

这里是a JSFiddle example：

class Hello extends React.Component {
  render() {
    return <div onClick={this.props.onClick}>Hello {this.props.name}</div>;
  }
}

function blah() {
  console.log('sdfsdf');
}

ReactDOM.render(
  <Hello name="World" onClick={blah}/>,
  document.getElementById('container')
);

Reactjs-我是否有义务在div框中传递嵌套的组件以触发函数？

1 个答案: