Как сделать компонент общим и сделать его переменные доступными извне?

avatar
user16516348
9 августа 2021 в 06:03
36
2
0

В моем приложении есть две функции.

const onAdd = (val: Val)=> {
        console.log(val)
        return val
}
const onDelete = (val: Val)=> {
        console.log(val)
        return val
}

Я хочу сделать этот компонент универсальным, чтобы, если он где-либо используется, эти функции могли легко возвращать значения, над которыми можно работать дальше.

<Adder data={val} onAdd={onAdd} onDelete={onDelete}/>

Как мне сделать так, чтобы когда человек использует этот компонент и хочет, чтобы это конкретное значение было удалено, он мог создать для него свою собственную функцию?

Источник
Elias
9 августа 2021 в 06:33
0

Для меня непонятно, чего вы хотите добиться. Что такое "этот компонент". У вас нет ни каких компонентов, кроме Adder. Вы спрашиваете, как реализовать Adder, чтобы можно было передать onAdd и onDelete?

Elias
9 августа 2021 в 06:36
0

Как вы определяете, когда добавить, а когда удалить? Нажатие кнопки?

Elias
9 августа 2021 в 06:49
0

Важно, чтобы вы точно описали, что вы хотите и что вы пробовали до сих пор, почему это не сработало и так далее.

Ответы (2)

avatar
Elias
9 августа 2021 в 06:46
0

В этом ответе предполагается, что Как сделать компонент универсальным и сделать его переменные доступными извне? и Как сделать компонент универсальным и сделать его переменные доступными извне? верны .

type Val = number;

interface AdderProps {
  data: Val;
  onAdd(val: Val): void;
  onDelete(val: Val): void;
}

function Adder(props: AdderProps): ReactElement {
  const {data, onAdd, onDelete} = props;
  
  return (
    <React.Fragment>
      <span>{data}</span>
      <button onClick={() => onAdd(data + 1)}>Add</button>
      <button onClick={() => onDelete(data - 1)}>Delete</button>
    </React.Fragment>
  );
}

function App(): ReactElement {
  const [data, setData] = useState<Val>(0);
  
  return <Adder data={data} onAdd={setData} onDelete={setData} />;
}

Если это удовлетворяет вашим требованиям, я бы рекомендовал заменить onAdd и onDelete одним реквизитом onChange:

. 
interface AdderProps {
  data: Val;
  onChange(val: Val): void;
}

function Adder(props: AdderProps): ReactElement {
  const {data, onChange} = props;
  
  return (
    <React.Fragment>
      <span>{data}</span>
      <button onClick={() => onChange(data + 1)}>Add</button>
      <button onClick={() => onChange(data - 1)}>Delete</button>
    </React.Fragment>
  );
}

function App(): ReactElement {
  const [data, setData] = useState<Val>(0);
  
  return <Adder data={data} onChange={setData} />;
}
avatar
Rohit Garg
9 августа 2021 в 06:09
0

Для этого вы можете использовать любую библиотеку управления состоянием, такую ​​как Redux, mobx, flux. React также предоставляет встроенный контекстный API. Вы можете сохранить значение в любом управлении состоянием, а также предоставить методы для его обновления.

https://reactjs.org/docs/context.html