如何使用函件组件将选定的道具传递给孩子的孩子

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}而不是doSomething={doSomething}和doSomethingElse={doSomethingElse}的形式从子组件传递给了其子组件，一切都很好。

但我不想把两个函数都传给每个孩子，我只想一个传一个，我还不知道怎么做

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

Answer 1

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