如何在React中将更新的道具从一个组件传递到另一个组件

Question

如何始终将更新的道具从一个组件传递到另一组件

我要将displayid传递给选项卡组件，它是从我停留在此部分的所选垂直组件中获得的。

基本上，每当我更改选项或从垂直组件从一个选项切换到另一个选项时，更新的displayid应该发送到选项卡组件

现在，我有两个选项CHRIS和RYAN，默认情况下已选择CHRIS，因此当我单击RYAN时，它应该将dispayid作为道具发送给道具，然后将更新的dispayid作为道具发送给另一个组件。 。

const Vertical = () => {
  const [items, setitems] = useState({
    stude: [{ displayid: "12", name: "CHRIS" }, { displayid: "13", name: "RYAN" }]
  });

  const renderSideBarDataSubjects = () => {
    return items.stude.map(stud => {
      const { id, name } = stud;
      return (
        <Nav.Link eventKey={name} key={id}>
          {name}
        </Nav.Link>
      );
    });
  };

  return (
    <div>
      <Tab.Container id="left-tabs-example" defaultActiveKey="CHRIS">
        <Nav variant="pills" className="flex-column">
          <Nav.Item>{renderSideBarDataSubjects()}</Nav.Item>
        </Nav>
      </Tab.Container>
    </div>
  );
};

这是我的TAB组件

const TAB = ({ displayid }) => {
  console.log("Tabbed bar rernderring");
  return (
    <div className="tabPanel-widget">
      <Tabs defaultActiveKey="do" id="uncontrolled-tab-example">
        <Tab eventKey="do" title="do">
          <Topics subjectUuid={displayid} />
        </Tab>
        <Tab eventKey="begin" title="begin">
          <p>complete</p>
        </Tab>
        <Tab eventKey="complete" title="complete">
          <p>complete</p>
        </Tab>
      </Tabs>
    </div>
  );
};

Answer 1

您可以使用其他状态轻松渲染道具：

const [displayedId, setDisplayedId] = useState('CHRIS');

然后，如果您拥有Nav.Link组件，则可以将在onclick事件上触发的设置器传递给它

<Nav.Link eventKey={name} key={id} onclick={() => setDisplayedId(name)}>{name}</Nav.Link>