Javascript 如何在ReactJS中调用包装器（父）方法

我无法解决这个问题。我想从

li

元素调用

Wrapper.onClickHandler

方法，因为我想通过

Wrapper

组件处理单击操作。这可能吗

class CallA extends Component {
  
  onClickHandler() {
    console.log('Call A Clicked');
  }
  
  render() {
    return (
      <ul className="call_a">
        {this.props.children}
      </ul>
    );
  }
  
}

class CallB extends Component {
  
  onClickHandler() {
    console.log('Call B Clicked');
  }
  
  render() {
    return (
      <ul className="call_b">
        {this.props.children}
      </ul>
    );
  }
  
}

class List extends Component {
  
  render() {
    
    const listType = props.listType;
    
    const WrapperComponents = {
      a: CallA,
      b: CallB
    }
  
    const Wrapper = WrapperComponents[listType];
    const Options = []
    
    for( const key in {a:1,b:2} ){
      Options.push(
        <li key={key} onClick={Wrapper.onClickHandler}>{key}</li>
      )
    }
    
    return (
      <Wrapper>
        {Options}
      </Wrapper>
    );
  }
}

类CallA扩展组件{
onClickHandler（）{
log（'calla Clicked'）；
}
render（）{
返回(

{this.props.children}

);
}
}
类CallB扩展组件{
onClickHandler（）{
log（'Call B Clicked'）；
}
render（）{
返回(

{this.props.children}

);
}
}
类列表扩展组件{
render（）{
const listType=props.listType；
常量包装器组件={
a:卡拉，
b:打电话
}
const Wrapper=WrapperComponents[listType]；
常量选项=[]
for（在{a:1，b:2}中的常量键）{
选项。推(
{key}
)
}
返回(
{Options}
);
}
}

有条件地调用不同的组件

const ComponentA = () => {
  const doSomething = () => {
       console.log('Dosomething in componentA')
  }

  return <li onClick={doSomething()} />
}

const ComponentB = () => {
  const doSomething = () => {
       console.log('Dosomething in componentB')
  }

  return <li onClick={doSomething()} />

}

class Wrapper extends Component {
  
  render() {
    return (
      <ul>
        <List />
      </ul>
    );
  }
  
}

class List extends Component {
  
  
  render() {

    return (
      <>
        {  Object.keys({a:1, b:2}).map(key => {
            return key === 'a' ? <ComponentA /> : <ComponentB />
         }
      </>
    );
  }
}

const ComponentA=（）=>{
常数doSomething=（）=>{
console.log（'组件A中的Dosomething'）
}
return

}
常量组件B=（）=>{
常数doSomething=（）=>{
console.log（'组件B中的Dosomething'）
}
return

}
类包装器扩展组件{
render（）{
返回(


);
}
}
类列表扩展组件{
render（）{
返回(
{Object.keys（{a:1，b:2}）.map（key=>{
返回键=='a'？：
}
);
}
}

该解决方案通常被称为将渲染函数作为子组件（FaCC）传递，而不是以通常的方式传递组件。尽管它可以被视为反模式，但如果使用得当，它将非常强大

这就是它的工作原理：在一个组件中定义一个渲染函数（

renderOptions

），然后将函数的引用作为

props.children

传递给另一个组件（

CallA

），这样，通过执行

{this.props.children（arg）}

。您的实现应该如下所示：

类CallA扩展组件{
onClickHandler（）{
log（'calla Clicked'）；
}
render（）{
返回(

{this.props.children（this.onClickHandler）}

);
}
}
/* ... */
类列表扩展组件{
render（）{
const listType=this.props.listType；
常量包装器组件={
a:卡拉，
b:打电话
}
const Wrapper=WrapperComponents[listType]；
函数呈现（onClickHandler）{
常量选项=[]
for（在{a:1，b:2}中的常量键）{
选项。推(
{key}
);
} 
返回选项；
}
返回(
{渲染}
);
}
}

我不能先调用

包装器

。

列表

将首先被调用，

包装器

是动态组件，取决于

列表。道具

。那么为什么你的点击功能在包装器中？也许你可以简单描述一下你试图做什么，可以给你提供更好的解决方案。如果你处理道具点击事件的方式，您的父/子组件之间的关系看起来很奇怪，那么您需要重新思考组件应该如何工作。我已经编辑了我的问题。请告诉我这是否有助于您更好地理解我的问题。我假设您希望有条件地调用不同的组件。我已经修改了代码，以显示我们通常是如何执行此操作的。