Question

我无法将函数从组件传递给其子组件的子组件。起初我使用以下方法：

这是我的父组件：

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 从子组件错误地传递给它的子组件，经过一些研究我发现如果我将子组件的 props 作为 {...props} 而不是 {{ 1}} 和 doSomething={doSomething} 一切正常。

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

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

Answer 1

除了节点或子组件之外，程序中的一切都很好，因为您已经解构了节点组件中的 doSomething 和 doSomethingElse 并且一次只传递了其中之一，这意味着其中之一将始终未定义。假设如果你传递 doSomething 那么 doSomethingElse 将是未定义的，然后当你将它传递给 useEffect 时它会产生一个错误

如何使用功能组件在反应中将选定的道具传递给孩子的孩子

1 个答案: