基于当前对象显示和隐藏组件

Question

我有一个父组件 Editor，其中包含一个对象数组，使用 map 方法映射到另一个组件 Scene：

function Editor() {
  const [URL, setURL] = useState();
  const [scenes, setScenes] = useState([]); 
const addScene = () => {
    const scene = {
      Id: Math.floor(Math.random() * 10000),
      JsonObj: canvas.getJsonObj(),
    };
    const cpScenes = [...scenes];
    cpScenes.push(scene);
    setScenes(cpScenes);
  };
  const removeScene = (scene) => {
    const cpScenes = scenes.filter((sc) => sc !== scene);
    setScenes(cpScenes);
  };
<div>
          {scenes.map((scene) => (
            <Scene
              key={Math.floor(Math.random() * 1000)}
              addText="scene #{f}id"
              onDelete={removeScene}
              value={scene}
              selected={true}
              length={scenes.length}
              switchScene={switchScene}
              saveCurrentScene={saveCurrent}
            />
          ))}
          <button onClick={addScene} className="btn btn-primary m-2">
            Add scene
          </button>
        </div>

场景组件：


function Scene(props) {
  const id = useState(_uniqueId("sceneCmpn-"));
  const { value, length, switchScene, onDelete, saveCurrentScene } = props;

  const [selected, setSelected] = useState(false);
  return (
    <div key={id}>
      <button
        id={id}
        onClick={() => {
          setSelected(true);
          switchScene(value);
        }}
      >
        Scene
      </button>
      {length > 1 && (
        <button onClick={() => onDelete(value)} className="btn btn-danger m-2">
          remove scene
        </button>
      )}
      {selected && (
        <button
          onClick={() => {
            saveCurrentScene(value);
          }}
          className="btn btn-success m-2"
        >
          Save
        </button>
      )}
    </div>
  );
}

我想让 save button 在我点击 scene button 时出现，它确实有效，但是当我点击另一个场景时，按钮停留在那里。

如果我切换（“单击”）场景，如何让 green save button 消失。

编辑：这是切换场景的代码，我认为对于这个问题并不重要:

const switchScene = (scene) => {
    let cpScenes = [...scenes];
    const index = scenes.indexOf(scene);
    const cpJsonObj = cpScenes[index].JsonObj;
    //console.log("this object in switchScene", cpJsonObj);
    canvas.resetEditor();
    canvas.loadJson(cpJsonObj);
    canvas.exportImg();
  };
```

Answer 1

在Editor组件中，您应该添加另一个状态来检查所选场景。

const [selectedScene, setSelectedScene] = useState();

而switchScene函数可能是

const switchScene = (scene) => {
    let cpScenes = [...scenes];
    const index = scenes.indexOf(scene);
    const cpJsonObj = cpScenes[index].JsonObj;
    //console.log("this object in switchScene", cpJsonObj);
    canvas.resetEditor();
    canvas.loadJson(cpJsonObj);
    canvas.exportImg();
    setSelectedScene(scene); //set state change here
};

之后，您可以修改 Scene 的 selected props from Editor

{scenes.map((scene) => (
            <Scene
              key={Math.floor(Math.random() * 1000)}
              addText="scene #{f}id"
              onDelete={removeScene}
              value={scene}
              selected={selectedScene === scene}
              length={scenes.length}
              switchScene={switchScene}
              saveCurrentScene={saveCurrent}
            />
          ))}

从以上所有更改中，您需要将它们与 Scene 组件对齐

现在 selected 来自 props，不再来自 state

function Scene(props) {
  const id = useState(_uniqueId("sceneCmpn-"));
  const { value, length, switchScene, onDelete, selected, saveCurrentScene } = props;

  return (
    <div key={id}>
      <button
        id={id}
        onClick={() => {
          switchScene(value);
        }}
      >
        Scene
      </button>
      {length > 1 && (
        <button onClick={() => onDelete(value)} className="btn btn-danger m-2">
          remove scene
        </button>
      )}
      {selected && (
        <button
          onClick={() => {
            saveCurrentScene(value);
          }}
          className="btn btn-success m-2"
        >
          Save
        </button>
      )}
    </div>
  );
}

基于当前对象显示和隐藏组件

Show and hide component based on current object

javascript

reactjs

use-state