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

Question

[groulls]

Есть 2 функциональных компонента, Parent и Child. Прокидываю пропсы таким способом.

Answer 1

[Дмитрий Беляев]

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}) => {

Comments

[groulls]

Да, пропустил, ну во втором варианте их и не будет. Я так понимаю имена функций в дочернем и родительском должны совпадать?

[Дмитрий Беляев]

groulls, если передаете как объект, то эти имена будут ключами объекта

[groulls]

Дмитрий Беляев, Понял, а вот если допустим объявить в Child компоненте useState как Объект с какими то свойствами, ну допусти useState({name:'',age:0}), внутри этого компонента их устанавливать и есть интерфейс, который инициализирует эти же свойства и устанавливает props как описано выше во втором варианте и есть необходимость передать это состояние вверх родителю и инициализировать этими значениями его state, что бы потом куда ни то отправить в БД например т.е я так думаю надо в child еще метод создать которые в качестве параметра будет отправлять этот state или есть более элегатное решение? И в обратную сторону в Parent вынуть из БД данные и инициализировать этим значениями уже имеющийся state в Child.

interface Props{
 name: string;
  age: number;
 setNewData:(data:any)=>void;
}
interface ChildProps {
  Child: Props;
}
export const Child: React.FC<ChildProps> = (props) => {
  const [person, setPerson] = useState({
    name: "",
   age: 0,
    });
props.Child.setNewData(person);
//методы setPerson для установки person
  const onChangeName = (e: React.ChangeEvent<HTMLInputElement>): void => {
    setPerson({ ...person, name: e.currentTarget.value });
  };

export const Auth: React.FC = () => {
const [person, setPerson] = useState({});
const setNewData = (data:any) => {
    setPerson({ ...person, data });
  };
return(
            <Child Child = {тут по идеи должны же быть все поля из State child + метод setNewData }/>
           т.е я думаю можно, наверное, общий интерфейс создать 
т.к будет не один компонент в родители рендериться и набор свойств у них будет разный 
или для каждого компонента свой state с набором полей делать 
и устанавливать из выгруженного с БД общего стэйта.

{/* 
export const Auth: React.FC = () => {
  const [person, setPerson] = useState({
    name: "",
    age: "",
  });

  const [person2, setPerson2] = useState({});

  const onsubmit = () => {
    save([]);
  };

  const setNewData = (data:any) => {
    setPerson2({ ...person2, data });
  };
  return (
    <div>
      <Child Child={person, setNewData} />

      <button onClick={onsubmit}>Cохранить</button>
    </div>
  );
};*/}

)
}

Answer 2

[Loli E1ON]

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"));

Comments

[groulls]

Понял, а вот если допустим объявить в Child компоненте useState как Объект с какими то свойствами, ну допусти useState({name:'',age:0}), внутри этого компонента их устанавливать и есть интерфейс, который инициализирует эти же свойства и устанавливает props как описано выше во втором варианте и есть необходимость передать это состояние вверх родителю и инициализировать этими значениями его state, что бы потом куда ни то отправить в БД например т.е я так думаю надо в child еще метод создать которые в качестве параметра будет отправлять этот state или есть более элегатное решение? И в обратную сторону в Parent вынуть из БД данные и инициализировать этим значениями уже имеющийся state в Child.

interface Props{
 name: string;
  age: number;
 setNewData:(data:any)=>void;
}
interface ChildProps {
  Child: Props;
}
export const Child: React.FC<ChildProps> = (props) => {
  const [person, setPerson] = useState({
    name: "",
   age: 0,
    });
props.Child.setNewData(person);
//методы setPerson для установки person
  const onChangeName = (e: React.ChangeEvent<HTMLInputElement>): void => {
    setPerson({ ...person, name: e.currentTarget.value });
  };

export const Auth: React.FC = () => {
const [person, setPerson] = useState({});
const setNewData = (data:any) => {
    setPerson({ ...person, data });
  };
return(
            <Child Child = {тут по идеи должны же быть все поля из State child + метод setNewData }/>
           т.е я думаю можно, наверное, общий интерфейс создать 
т.к будет не один компонент в родители рендериться и набор свойств у них будет разный 
или для каждого компонента свой state с набором полей делать 
и устанавливать из выгруженного с БД общего стэйта.

{/* 
export const Auth: React.FC = () => {
  const [person, setPerson] = useState({
    name: "",
    age: "",
  });

  const [person2, setPerson2] = useState({});

  const onsubmit = () => {
    save([]);
  };

  const setNewData = (data:any) => {
    setPerson2({ ...person2, data });
  };
  return (
    <div>
      <Child Child={person, setNewData} />

      <button onClick={onsubmit}>Cохранить</button>
    </div>
  );
};*/}

)
}