React.js将状态设置为true或false

Question

如何设置loaderSimpleStory（）和FlightStatusStory的状态。

当loaderSimpleStory（）为true时，FlightStatusStory将为false，反之亦然。

const LoadingStory = () => {
  return (
    <div className="content-wrapper">
      {loaderSimpleStory()}
      <div className="container-subnav">
        <FlightStatusStory />
      </div>
      <div className="headline">{headlineSimpleStory()}</div>
      {linkSimpleStory()}
      {richTextSimpleStory()}
    </div>
  );
};

任何帮助都会非常有帮助。

Answer 1

import React, {useState, useEffect} from 'react';

const LoadingStory = () => {
    const [status, setStatus] = useState(null);

    useEffect(() => {
        setStatus(loaderSimpleStory()); 
    },[])

    return (
        <div className="content-wrapper">
            {status == null && loaderSimpleStory()}
            <div className="container-subnav">
                {status !== null && <FlightStatusStory status={!status} />}
            </div>
        </div>
    );
};