javascript - react : How to call function of new added child component?

Question

我有一个类组件渲染多个子组件:

// inside my parent component
const allElements = arrayWithElements.map(elem => (
  <ChildElement title={elem.title} />
));


// my child component 
const ChildElement = ({title}) => {

  // log the title to the console
  const doSomething = () => {
    console.log(title);
  }

  return (
   <button type="button" onClick={doSomething}>{title}</button>
  );
}

我的问题是，当我向数组“allElements”添加一个新元素时，我想仅针对新添加的元素执行一次函数“doSomething”。我认为使用 refs 可能是一个解决方案，但是 refs 不允许与函数组件结合使用，那么我可以实现这一点吗？

Answer 1

访问您 child 的方法是反模式。要实现所描述的效果，您可以将每个 ChildComponent 配置为在 mount

上仅记录一次

const ChildElement = ({title}) => {

  //logging once in mount
  useEffect(() => console.log(title), [])

   const doSomething = () => {
    console.log(title);
  }

  return (
   <button type="button" onClick={doSomething}>{title}</button>
  );
}