Javascript 如何调用同一子组件的多个实例'；来自父函数的s函数

我知道使用ref可以从父组件调用子组件中的函数。但我的问题是我有多个子组件实例，我需要在所有子组件中调用相同的函数

//获取一个钩子函数
const{useState，useRef，useImperialiveHandle，useEffect}=React；
常量父项=（{title}）=>{
const childRef1=useRef（）；
const childRef2=useRef（）；
const childRef3=useRef（）；
const childRef4=useRef（）；
const childRef5=useRef（）；
常量handleClick=（）=>{
childRef1.current.increment（）
childRef2.current.increment（）
childRef3.current.increment（）
childRef4.current.increment（）
childRef5.current.increment（）
}
返回(
{title}

handleClick（）}>
点击我
);
};
常量Child=（{num，childRef}）=>{
const[count，setCount]=useState（0）
使用命令式句柄（childRef，（）=>({
增量（）{
//如果（文本可编辑）
设置计数（计数+1）
},
}));
useffect（（）=>{
设置计数（num）
}，[num]）
返回(
{
计数
}
)
}
//渲染它
ReactDOM.render(
,
document.getElementById（“react”）
);
跟踪父对象中的状态并将其作为道具传递给子对象：

const Parent = ({title}) => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{title}</p>
      <Child count={count} />
      <Child count={count} />
      <Child count={count} />
    </div>
  )
}

const Parent=（{title}）=>{
const[count，setCount]=useState（0）；
返回(
{title}

)
}

如果需要它们独立，请为状态使用数组：

const Parent = ({title}) => {
  const [count, setCount] = useState([0,1,42,96]);

  const onIncrement = index => {
    // probably a better way to do this. just here for illustrative purposes
    const newCount = [...count];
    newCount.splice(index, 1, count[index] + 1);
    setCount(newCount);
  }

  const incrementAll = () => setCount(count.map(x => x + 1));

  return (
    <div>
      <p>{title}</p>
      { count.map((entry, index) => (
        <Child
          num={entry}
          key={index}
          onIncrement={() => onIncrement(index))} {/* if you want the child to be able to do it */}
        />
      )) }
      <button onClick={incrementAll}>Click Me</button>
    </div>
  )
}

const Parent=（{title}）=>{
const[count，setCount]=useState（[0,1,42,96]）；
const onIncrement=索引=>{
//这可能是一个更好的方法。这里只是为了说明
const newCount=[…count]；
拼接（索引，1，计数[索引]+1）；
setCount（newCount）；
}
constincrementall=（）=>setCount（count.map（x=>x+1））；
返回(
{title}

{count.map（（条目，索引）=>(
onIncrement（index））}{/*如果希望孩子能够这样做*/}
/>
)) }
点击我
)
}
跟踪父对象中的状态并将其作为道具传递给子对象：

const Parent = ({title}) => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{title}</p>
      <Child count={count} />
      <Child count={count} />
      <Child count={count} />
    </div>
  )
}

const Parent=（{title}）=>{
const[count，setCount]=useState（0）；
返回(
{title}

)
}

如果需要它们独立，请为状态使用数组：

const Parent = ({title}) => {
  const [count, setCount] = useState([0,1,42,96]);

  const onIncrement = index => {
    // probably a better way to do this. just here for illustrative purposes
    const newCount = [...count];
    newCount.splice(index, 1, count[index] + 1);
    setCount(newCount);
  }

  const incrementAll = () => setCount(count.map(x => x + 1));

  return (
    <div>
      <p>{title}</p>
      { count.map((entry, index) => (
        <Child
          num={entry}
          key={index}
          onIncrement={() => onIncrement(index))} {/* if you want the child to be able to do it */}
        />
      )) }
      <button onClick={incrementAll}>Click Me</button>
    </div>
  )
}

const Parent=（{title}）=>{
const[count，setCount]=useState（[0,1,42,96]）；
const onIncrement=索引=>{
//这可能是一个更好的方法。这里只是为了说明
const newCount=[…count]；
拼接（索引，1，计数[索引]+1）；
setCount（newCount）；
}
constincrementall=（）=>setCount（count.map（x=>x+1））；
返回(
{title}

{count.map（（条目，索引）=>(
onIncrement（index））}{/*如果希望孩子能够这样做*/}
/>
)) }
点击我
)
}

我知道使用ref可以调用函数

太好了！在这种情况下，我们将使用相同的过程，但只是将其进一步扩展

设置组件或状态以保存子组件

this.state.children = [];

然后
map（）

var children = [1,2,3,4,5,6];
children.map((child) => {
    return (
        <Child
            num={child}
            ref={(instance) => {this.state.children[child] = instance}}
        />
    );
});

我知道使用ref可以调用函数

太好了！在这种情况下，我们将使用相同的过程，但只是将其进一步扩展

设置组件或状态以保存子组件

this.state.children = [];

然后
map（）

var children = [1,2,3,4,5,6];
children.map((child) => {
    return (
        <Child
            num={child}
            ref={(instance) => {this.state.children[child] = instance}}
        />
    );
});

我是用下面的钩子做的


//获取一个钩子函数
const{useState，useRef，useImperialiveHandle，useEffect}=React；
常量父项=（{title}）=>{
const[count，setCount]=useState（0）；
const[children，setChildren]=useState（5）；
常量[childRefs，setChildRefs]=useState（[]）
const handleClick=（）=>childRefs.forEach（c=>c.current.increment（））
useffect（（）=>{
setChildRefs（[…数组（children）.keys（）].map（e=>React.createRef（）））
}，[标题]）
返回(
{title}

{
[…数组（子）.keys（）].map（e=>）
}
handleClick（）}>
点击我
);
};
常量Child=（{num，childRef}）=>{
const[count，setCount]=useState（0）
使用命令式句柄（childRef，（）=>({
增量（）{
//如果（文本可编辑）
设置计数（计数+1）
},
}));
useffect（（）=>{
设置计数（num）
}，[num]）
返回(
{
计数
}
)
}
//渲染它
ReactDOM.render(
,
document.getElementById（“react”）
);
我是用下面这样的钩子做的


//获取一个钩子函数
const{useState，useRef，useImperialiveHandle，useEffect}=React；
常量父项=（{title}）=>{
const[count，setCount]=useState（0）；
const[children，setChildren]=useState（5）；
常量[childRefs，setChildRefs]=useState（[]）
const handleClick=（）=>childRefs.forEach（c=>c.current.increment（））
useffect（（）=>{
setChildRefs（[…数组（children）.keys（）].map（e=>React.createRef（）））
}，[标题]）
返回(
{title}

{
[…数组（子）.keys（）].map（e=>）
}
handleClick（）}>
点击我
);
};
常量Child=（{num，childRef}）=>{
const[count，setCount]=useState（0）
使用命令式句柄（childRef，（）=>({
增量（）{
//如果（文本可编辑）
设置计数（计数+1）
},
}));
useffect（（）=>{
设置计数（num）
}，[num]）
返回(
{
计数
}
)
}
//渲染它
ReactDOM.render(
,
document.getElementById（“react”）
);

虽然这个答案是正确的，但这绝不是理想的解决方案。将组件重组为不要求父级保留未知数量的引用可能更为理想，而t