Показать внешний компонент на флажок Нажмите между двумя компонентами без сохранения состояния

Question

Я новичок в реакции и редукции. Я пытаюсь вызвать / показать div другого компонента без состояния от родительского компонента. Например, если у меня есть код ниже

const funcA = ({key}) = > {
  return (
        <div>
            <input type="checkbox">
        </div>
  );
};
export default funcA


const funcB = ({key}) = > {
  return (
      <React.Fragment>
         <div>
            <input type="text" placeholder="age" />
         </div>
         <div id="showThisDiv">
            <input type="text" placeholder="age" />
         </div>
      </React.Fragment>

  );
};
export default funcB

, я не пытаюсь go с классами. В компонентах без сохранения состояния я знаю, как показать / скрыть раздел с помощью useState, но я могу сделать это только в том же компоненте. Проблема или, скорее, проблема, когда я пытаюсь показать / скрыть раздел из другого компонента. Как мне показать / скрыть div с идентификатором showThisDiv в funcB, если в funcA установлен флажок?

Answer 1

Это возможно с использованием приставки, но вы также можете сделать это с помощью ловушек состояния и реагирования:

проверьте следующие коды и поля: https://codesandbox.io/s/vibrant-driscoll-odqmo

Приложение. js

import React from "react";
import "./styles.css";
import FuncA from "./FuncA";
import FuncB from "./FuncB";

export default function App() {
  const [age, setAge] = React.useState(0);
   handleInput = (event) => {
     console.log(event.target.value);
     setAge(age === 0 ? 1 : 0);
   }
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <FuncA age={age}  onChange={handleInput} />
      <FuncB age={age} />
    </div>
  );
}

FuncA. js

import React from "react";

export default function FuncA(props) {
  return (
    <>
      <label htmlFor="checkbox">
        <input type="checkbox" name="age" onChange={props.onChange} value={props.age} />
      </label>
    </>
  );
}

FuncB. js

import React from "react";

export default function FuncB(props) {
  return (
    <>
      {props.age === 0 && <div className="divA">show div a</div>}
      {props.age === 1 && <div className="divB">show div b</div>}
    </>
  );
}

Answer 2

Да, что-то вроде этого:

РЕДАКТИРОВАТЬ:

// ComponentA.js
const ComponentA = props => <input type="checkbox" onChange={props.onChange} />

// ComponentB.js
const ComponentB = props => (
  <>
    <div>
      <input type="text" placeholder="age" />
    </div>
    {props.visible && (
      <div id="showThisDiv">
        <input type="text" placeholder="age" />
      </div>
    )}
  </>
)

// App.js
const App = () => {
  const [visible, setVisible] = useState(false);
  return (
    <>
      <ComponentA onChange={() => setVisible(!visible)} />
      <ComponentB visible={visible} />
    </>
  )
}

Теперь, как вы хотите ..