javascript - 如何在 ReactJS 中调用 Wrapper（父）方法

Question

我无法解决这个问题。我想Wrapper.onClickHandler从元素调用方法，li因为我想通过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>
    );
  }
}

标签： javascriptreactjs

Answer 1

有条件地调用不同的组件。

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 />
         }
      </>
    );
  }
}