Question

我有一个子功能组件“ Display”。其中包含两个按钮。这些按钮可以在true或false之间切换状态。

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

然后，我想将此布尔值传递给另一个名为“ 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.回调，以便孩子可以更改值

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

BITS 32

显示组件为

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

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

1 个答案: