通过将道具传递给子组件来反应渲染子组件

Question

所以我有一个工作区组件，呈现子<IndividualWorkspaceOverview />，

{requested ? (
        allWorkspace.map((e) => (
          <IndividualWorkspaceOverview
            key={e.user}
            detail={e.q1}
            user={e.user}
          />
        ))
      ) : (
        <div></div>
      )}

和<IndividualWorkspaceOverview />返回

    <div>
      <button>{props.user}'s Workspace</button>
    </div>
  ); 

当我想实现用户单击按钮的位置时，就会显示该用户的工作区。

我想到的一个解决方案是，仅渲染一个<IndividualWorkspaceOverview />，将allWorkspace数组传递给它，然后将if条件设置为渲染工作区概述的按钮，或者设置<IndividualWorkspace /> 手柄单击功能将对这些按钮起作用，并将用户名作为道具传递给每个按钮，当单击按钮时，该按钮将导致重新渲染<IndividualWorkspaceOverview />并显示与该按钮用户名关联的<IndividualWorkspace />。

我想知道是否有更好的方法来实现这一点？

我想出的解决方案。

  return (
    <div className="container-workspace">
      <h4>workspace</h4>

      {console.log(allWorkspace)}
      {requested ? (
        <div>
          <button onClick={handleClickBack}>Back To Questions</button>
          <button>Create my own workspace</button>
          <IndividualWorkspaceOverview allWorkspace={allWorkspace} />
        </div>
      ) : (
        <div>
          <button type="button" onClick={handleClick}>
            Q1
          </button>
          <button>Q2</button>
          <button>Q3</button>
          <button>Q4</button>
          <button>Q5</button>
        </div>
      )}
    </div>
  );

const IndividualWorkspaceOverview = (props) => {
  const [clicked, setClicked] = useState(false);
  const [viewOverview, setViewOverview] = useState(true);

  //contains the user workspace detail for rendering
  const [workspaceDetail, setWorkspaceDetail] = useState("");

  const handleClick = (detail) => [setWorkspaceDetail(detail)];

  return (
    <div>
      {viewOverview ? (
        props.allWorkspace.map((e) => (
          <button
            onClick={() => {
              setViewOverview(!viewOverview);
              handleClick(e.q1);
            }}
          >
            {e.user} 's Woskapce
          </button>
        ))
      ) : (
        <IndividualWorkspace detail={workspaceDetail} />
      )}
    </div>
  );
};

const IndividualWorkspace = (props) => {
  const [workspaceDetail, setWorkspaceDetail] = useState(props.detail);
  return (
    <div className="container-individual-workspace">
      <textarea
        value={workspaceDetail}
        onChange={(e) => setWorkspaceDetail(e.target.value)}
      ></textarea>
      <button type="button">Save</button>
    </div>
  );
};