react-props - 如何使用功能组件将选定的道具传递给孩子的孩子

问题描述

我无法将功能从一个组件传递给它的孩子的孩子。起初我使用以下方法：

这是我的父组件：

function MainComponent() {
  
  const doSomething = () => {
    //do something
  };  

  const doSomethingElse = () => {
    //do something
  };
    
   
  return (

    <>
      <form>        
        <CustomComponent state={currentState} doSomething={doSomething} doSomethingElse={doSomethingElse} />        
        <button>send</button>
      </form>    
    </>

  );

};

export default MainComponent;

这是父母的孩子：

    function CustomComponent(props) {
  
  const {doSomething, doSomethingELse} = props;
  
  
  return (
    <>
      <div className="container">          
        <div className="options">          
          <div className="option">
            <Selection className="radio" type="radio" id="one" name="category" doSomething={doSomething} />
            
          </div>
          <div className="option">
            <Selection className="radio" type="radio" id="two" name="category" doSomething={doSomething} />
            
          </div>
          <div className="option">
            <Selection className="radio" type="radio" id="three" name="category" doSomething={doSomething} />
            
          </div>
          <div className="option">
            <Selection className="radio" type="radio" id="four" name="category" doSomething={doSomething} />
            
          </div>
        </div>
        <div className="selected">
            <Selection className="radio" type="radio" id="category" name="menu" doSomethingELse={doSomethingELse} />
            
        </div>
      </div>
    </>
  );  
};

export default CustomComponent;

这是孩子的孩子：

function Selection(props) {

 
  const {doSomething, doSomethingElse} = props;
  
  useEffect(() => {
    doSomething();
  }, [id, doSomething]);
  
  
  useEffect(() => {
    doSomethingElse();
  }, [name, doSomethingElse]);
//
  
  const changeHandler = event => {
    //SOME LOGIC 
  };

  const clickHandler = event => {
    //SOMELOGIC  
  };

  
  
  const element = 
  <input
    className={props.className}
    type={props.type}
    id={props.id}
    name={props.name}
    onChange={changeHandler}
    onClick={ClickHandler}        
  />

  return(
    <>{element}</>
  ); 
};

export default Selection;

渲染我的主要组件时，出现以下错误：

TypeError: onTouch is not a function

我的怀疑是我错误地将道具从子组件传递给了它的子组件，经过一些研究，我发现如果我将道具从子组件传递给它的子组件，{...props}而不是doSomething={doSomething} 并且doSomethingElse={doSomethingElse}一切正常。

但我不想将这两个函数都传递给每个孩子，我只是一个传递一个，而且我无法弄清楚如何去做。

有人可以解释一下这是如何实现的吗？

标签： react-props

react-props - 如何使用功能组件将选定的道具传递给孩子的孩子

问题描述

解决方案

推荐阅读