如何在 React 中将子方法传递给 parend 组件?

Question

有没有办法将子组件中的方法使用到其父组件？

Answer 1

基本上没有。 React 它是一个从上到下的库构建，没有完整的数据流策略。

我不确定您要实现和发送什么，但请考虑以下解决方案之一：

1. 在子项处返回要发送给父项的方法
创建一个常量
2. 和一个能够在父级更改常量函数的函数，将它们(至少是函数)作为道具发送给子项
3. 使用库这样的 Redux 来管理整个应用程序状态，然后你可以在子节点上操作它，更改将影响父
应用程序

Answer 2

这是一个你应该尽量避免的模式，但如果你发现自己需要这样做，你可以在父级中创建一个"setter"函数，并使用 props 将其传递给孩子。

class Parent extends React.Component {
constructor (props){
super(props);
this.state = {
childFunction: null,
};
}
setChildFunction(childFunction){
this.setState({
childFunction: childFunction,
)}
}
useChildFunction(){
if(this.state.childFunction){
this.state.childFunction();
}
}
render() {
return (
<div className="parent" onClick={this.useChildFunction.bind(this)}>
<Child setChildFunction={this.setChildFunction.bind(this)}/>
</div>
);
}
}

class Child extends React.Component {
componentDidMount(){
this.props.setChildFunction(this.childFunction.bind(this));
}
childFunction(){
//do something
}
render() {
return (
<div className="child" /> 
);
}
}

Answer 3

是的，有一种方法，即使用 ref，但这是反模式。

const App = () => {
const r = React.useRef();
return (
<div>
<button onClick={() => r.current()}>add</button>
<Child r={r}/>
</div>
);
}
const Child = ({r}) => {
const [count, setCount] = React.useState(0);
r.current = () => setCount(count + 1);
return (
<p>{count}</p>
);
}
ReactDOM.render(<App/>, document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>