Question

假设我有2个反应元素： componentSender 和 componentReceiver 。需要循环生成N次。

他们的特殊之处在于，每当有人单击一个 componentSender 时，道具都会在相应的 componentReceiver 中发生变化。

这对组件可能很简单：

function ComponentReceiver(props) {
  return (
    <div>{`Listening to "Sender ${props.indexVar}" and it last received: ${props.showVar}`}</div>
  );
}

function ComponentSender(props) {
  return (
    <input type="button" onClick={() => {props.onChangeValue(props.indexVar);}}
      value={`SENDER for ${props.indexVar}> `}
    />
  );
}

我正在循环中使用React.createElement并创建对，您可以在这里看到它：

https://codepen.io/danieljaguiar/pen/bGVJbGw?editors=1111

演示中的最大问题是，当我更改父（APP）中的状态时，子组件不会重新呈现。

Answer 1

您必须解决一些问题：

try not to store jsx in state。直接在render中迭代并渲染。
在handleChangeValue函数中，完全不更改显示状态引用，因此不会重新渲染该组件。确保复制show（使用传播运算符），然后更新状态。
删除useEffect和

Working & simplified copy of your code is here在代码和框中

具有修复功能的代码段

function ComponentReceiver(props) {
  return (
    <div>{`Listening to "Sender ${props.indexVar}" and I received: ${
      props.showVar
    }`}</div>
  );
}

function ComponentSender(props) {
  return (
    <input
      type="button"
      onClick={() => {
        props.onChangeValue(props.indexVar);
      }}
      value={`SENDER for ${props.indexVar} ----------------------> `}
    />
  );
}

export default function App() {
  const [show, SetShow] = React.useState([]);
  const [pageElements, setPageElements] = React.useState([]);

  const handleChangeValue = val => {
    const updatedShow = [...show];
    updatedShow[val] = !updatedShow[val];
    SetShow(updatedShow);
  };

  React.useEffect(() => {
    let index = 0;
    let elements = [];

    while (index < 5) {
      show[index] = true;
      SetShow([...show]);

      elements.push(
        <div key={index} style={{ display: "flex", margin: "20px" }}>
          <ComponentSender
            key={index + "s"}
            indexVar={index}
            onChangeValue={handleChangeValue}
          />
          <ComponentReceiver
            key={index + "R"}
            indexVar={index}
            showVar={show[index]}
          />
        </div>
      );

      index++;
      SetShow([...show]);
    }
    setPageElements(elements);
  }, []);
  return (
    <div>
      {[...Array(5).keys()].map((_, index) => {
        return (
          <div key={index} style={{ display: "flex", margin: "20px" }}>
            <ComponentSender
              key={index + "s"}
              indexVar={index}
              onChangeValue={handleChangeValue}
            />
            <ComponentReceiver
              key={index + "R"}
              indexVar={index}
              showVar={show[index]}
            />
          </div>
        );
      })}
    </div>
  );
}

在React.createElement

1 个答案: