如何从react中的父组件调用子组件方法

Question

父组件中有一组react组件。在父组件上的某个事件中，我想运行子组件的数组，并为每个子组件调用一个方法。我怎样才能做到这一点？它似乎不像香草JS那样工作，在香草JS中，你有一个类的实例，然后简单地调用一个方法。下面是简化的代码：

const Item = props => {
const value = () => 'result!';
return (
<div></div>
)
}

const App = props => {
const items = props.items.map(item => <Item key={uuid()} item={item} />)
const run = e => {
items.map(item => console.log(item.value()))
}
return (
<button onClick={run} type="button">Run!</button>
) 
}
const items = [
'Lorem ipsum dolor sit amet',
'consectetur adipiscing elit'
];
ReactDOM.render(<App items={items} />, document.querySelector("#app"))

我用这个代码创建了一个jsfiddle-https://jsfiddle.net/jkLq26pg/37/在第11个字符串上，方法value((被调用，它会引发一个错误。但记录item.props可以工作，并为每个项目输出道具。为什么不调用方法？请给我一个如何使它发挥作用的建议。

Answer 1

在您的情况下，您必须通过数组进行映射，并使用回调ref附加ref。使用forwardRef渲染子组件，并使用useImperativeHandle钩子将您的函数公开给父组件。

工作演示

代码段

const Item = forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
value: () => "result!"
}));
return <div ref={ref} />;
});
const itemsz = ["Lorem ipsum dolor sit amet", "consectetur adipiscing elit"];
const App = props => {
const ref = useRef({});
const items = itemsz.map((item, index) => {
return (
<Item
ref={r => (ref.current[index] = r)}
key={index}
item={item}
/>
);
});
const run = e => {
items.map((item, index) => console.log(ref.current[index].value()));
};
return (
<>
<h3>click run and see console log</h3>
<button onClick={run} type="button">
Run!
</button>
{items}
</>
);
};

注意-尽量避免这种模式。

Answer 2

解决此问题的一种方法是编写useEffect并在该useEffect中调用item.value()逻辑。一旦您的列表挂载到DOM，就会自动调用您的函数。这可能是调用函数的正确位置，因为您的列表将在DOM中呈现，然后可以处理副作用。

const Item = props => {
const value = () => 'result!';
// Handle your side effects here
useEffect(() => {
value();
}, []);
return (
<div></div>
)
}

此useEffect将在组件装入DOM节点后工作。您总是可以将函数放在基于类的组件中的生命周期方法中，或者放在函数组件中的钩子中，并根据您的情况从那里调用它们。