在React中调用函数组件和钩子的子方法

Question

我试图在ReactJS中从使用类组件切换到函数组件和钩子。我创建了一个简单的程序来说明我要做的事情。

这是一个子组件，它有一个名称和一个值:

function Child(props) {
const [value, setValue] = useState(0)
function increment() { setValue(value + 1) }
return (<div>Child ({props.name}): {value}</div>)
}

子组件将被传递给父组件，父组件有自己的值，当该值递减时，子组件的值应该递增:

function Parent(props) {
const [value, setValue] = useState(10)
function decrement() { setValue(value - 1) }
return (<div>
<div>Parent: {value}</div>
<button onClick={decrement}>Pass from parent to child</button>
{props.child}
</div>)
}

子元素在应用程序级别传递给父元素(理论上，子元素可以动态切换，但为了简化，这里我们只设置两个元素中的一个):

function Application(props) {
const child1 = <Child name="Alice" />
const child2 = <Child name="Bob" />
const child = props.option == "Alice" ? child1 : child2
return (<Parent child={child} />)
}

现在我需要的是，当父元素的值减少时，子元素的值应该增加。在React中，你不能直接从父组件调用子组件的方法，所以我正在寻找一种方法来实现这一点，这也将允许我改变子组件，如代码中所示。

如果你运行下面的代码笔，这将是有意义的。

codepen

Answer 1

这是您正在寻找的解决方案

const { useState } = React;
function Parent(props) {
const [value, setValue] = useState(10)

const [childValue, setChildValue] = useState(0)

function changeValue(){
setValue(value-1);
setChildValue(childValue + 1);

}

return (<div>
<div>Parent: {value}</div>
<button onClick={changeValue}>Pass from parent to child</button>
<Child name={props.option} value={childValue} /> 
</div>)
}
function Child(props) {
return (<div>Child ({props.name}): {props.value}</div>)
}
function Application(props) {
// Child component is decided by the Application component and can change at any time

return (<Parent option={props.option} />)
}

不是从应用组件传递子组件，而是从父组件传递子组件。

我希望这是你正在寻找的。