@groulls

Прокинуть Props с использование TS?

Есть 2 функциональных компонента, Parent и Child. Прокидываю пропсы таким способом.
  • Вопрос задан
  • 104 просмотра
Решения вопроса 2
bingo347
@bingo347
Бородатый программер
export const Auth: React.FC = () => {
    const onChange1 = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {}, []);
    const onChange2 = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {}, []);
    return(
            <Child  Parent = {{onChange1, onChange2}}/>
    )
}

P.S. тут фигурные скобочки пропустили:
export const Child: React.FC<Props> = ({onChange1, onChange2}) => {
Ответ написан
E1ON
@E1ON
web, gamedev, anime, science
import * as React from "react";
import { render } from "react-dom";
import "antd/dist/antd.css";

type ChildrenProps = {
  parent: {
    onChange1: (e: React.ChangeEvent<HTMLInputElement>) => void,
    onChange2: (e: React.ChangeEvent<HTMLInputElement>) => void,
  }
};

const Children = (props: ChildrenProps) => <div>
  <input type="text" onChange={props.parent.onChange1}/>
  <input type="text" onChange={props.parent.onChange2}/>
</div>;

const Auth = () => {
  const onChange1 = useCallback((e: React.ChangeEvent<HTMLInputElement>) => alert(1), []);
  const onChange2 = useCallback((e: React.ChangeEvent<HTMLInputElement>) =>  alert(2), []);

  return <Children parent={{onChange1, onChange2}}/>
}

const App = () => <Auth/>;

render(<App />, document.getElementById("root"));
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы