将状态从子组件传递到父组件中包含的另一个子组件

Question

我有一个子功能组件“显示”。其中包含两个按钮。按钮在真或假之间切换状态。

我想将此布尔值传递回父容器（组件）。

然后我想将此布尔值传递给另一个名为“DisplayTitle”的子功能组件。基于布尔值，我只想更新在功能组件中呈现的字符串道具。

我对此有点陌生。我应该使用 redux 还是有更简单的方法？谢谢

还没有

'显示'子组件：

import * as React from 'react';

import Button from 'react-bootstrap/Button';
import Col from 'react-bootstrap/col';

interface Props {
    buttonOneLabel: string;
    buttonTwoLabel: string;
}

const Display = ({
    buttonOneLabel,
    buttonTwoLabel,
}: Props) => {
    const [state, setVariant] = React.useState({ status: true });

    return (
        <>
            <Col md="auto">
              <Button
              onClick={() => setVariant({ status: true })}
              variant={state.status ? 'primary' : 'outline-primary'}
              >
              {buttonOneLabel}
              </Button>
              <Button
              onClick={() => setVariant({ status: false })}
              variant={state.status ? 'outline-primary' : 'primary'}
              >
              {buttonTwoLabel}
              </Button>
            </Col>
        </>
    );
};

export default Display;

'DisplayTitles'子组件：

import * as React from 'react';

import Col from 'react-bootstrap/col';

interface Props {
    title: string;
}

const DisplayTitles = ({
    title,
}: Props) => (
    <>
        <Col>
          <h3>{title}</h3>
        </Col>
    </>
);

export default DisplayTitles;

父组件

import * as React from 'react';

import Jumbotron from 'react-bootstrap/Jumbotron';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/row';

import Title from './Title';
import SearchBy from './SearchBy';
import QuickSearch from './QuickSearch';
import Dates from './Dates';
import Display from './Display';
import DisplayTitle from './DisplayTitle';
import RunReport from './RunReport';
import AdvancedSearch from './AdvancedSearch';
import Options from './Options';

const Header = () => (
  <div className="daily-sales-header">
    <Jumbotron>
      <Container fluid>
        <Title
          title="Daily Sales"
          subTitle="(Single Page)"
        />
        <Row>
          <SearchBy
            colClass="search-by-col"
            buttonId="search-by-button"
            buttonLabel="Search by"
          />
          <QuickSearch
            buttonLabel="Quick Search"
            eleClass="quick-search"
            eleIdBtn="quick-search-button"
          />
          <Dates
            fromClass="from-date"
            fromLabel="From"
            toClass="to-date"
            toLabel="To"
          />
          <Display
            buttonOneLabel="Department"
            buttonTwoLabel="Sub-Department"
            onSelectLanguage={handleVari}
          />
          <RunReport
            buttonLabel="Run Report"
          />
        </Row>
        <Row>
          <AdvancedSearch
            buttonClass="adv-search-btn pull-right"
            buttonLabel="Advanced Search"
          />
        </Row>
      </Container>
    </Jumbotron>
    <Row>
      <DisplayTitle
        title="Department Sales"
      />
      <Options />
    </Row>
  </div>
);

export default Header;

Answer 1

提升状态是这里最简单的方法。

父组件将保持所有子组件的状态并通过 1. 价值作为道具 2. 回调以便孩子可以改变值

示例（未经测试，仅用作提示）

const Header = () => {
    const [state, setVariant] = React.useState({ status: true });

    return <div className="daily-sales-header">
        /* ... */
        <Display
            uttonOneLabel="Department"
            buttonTwoLabel="Sub-Department"
            onSelectLanguage={handleVari}
            setVariant={setVariant.bind(this)}
            status={state.status}
      />
      /* ... */
  <DisplayTitle
    title="Department Sales"
    status={state.status}
  />
  <Options />
</Row>
</div>
}

显示组件将是

import * as React from 'react';

import Button from 'react-bootstrap/Button';
import Col from 'react-bootstrap/col';

interface Props {
    buttonOneLabel: string;
    buttonTwoLabel: string;
    status: boolean;
    setVariant: (status: {status: boolean}) => void;
}

const Display = ({
    buttonOneLabel,
    buttonTwoLabel,
    status,
    setVariant
}: Props) => {
return (
    <>
        <Col md="auto">
          <Button
          onClick={setVariant.bind(this, { status: true })}
          variant={status ? 'primary' : 'outline-primary'}
          >
          {buttonOneLabel}
          </Button>
          <Button
          onClick={setVariant.bind(this, { status: false })}
          variant={status ? 'outline-primary' : 'primary'}
          >
          {buttonTwoLabel}
          </Button>
        </Col>
    </>
    );
};

export default Display;

显示标题将是

// ...
interface Props {
    title: string;
    status: boolean;
}

const DisplayTitles = ({
    title,
    status
}: Props) => (
    <>
        <Col>
             <h3>{title}</h3>
             <h3>{status}</h3>
        </Col>
    </>
);
// ...

因此，当您单击Display 组件中的按钮时，将调用来自父组件的setVariant。它会更新父级中的status，这将立即作为道具传播到Display 和DisplayTitles