En reaccionar puedo hacer algo como:
App.jsx
const App = () => { const [state, setState] = useState("old value") return ( <> <ChildComponent setState={setState} /> </> ) } ChildComponent.jsx
const ChildComponent = ({ setState }) => { const changeState = () => setState("new value") return ( <div> <button onClick={changeState}>Click</button> </div> ) }Luego se actualizará el estado principal.
No sé cómo hacer lo mismo en Svelte...
Tengo esto:
index.svelte
<script> import { ChildComponent } from "@components" let state = "old value" </script> <main> <ChildComponent {state} /> </main> ChildComponent.svelte
<script> export let state const changeState = () => { // I need to do something like: state = "new value" } </script> <div> <button on:click={changeState}>Click</button> </div>Y ver el nuevo valor reflejado en el padre.
Quiero hacerlo sin usar tiendas... No sé si es posible.
Tal vez la tienda sea la única forma de proceder.
soy orejas
Hay dos formas de hacer esto en Svelte:
Con encuadernación bidireccional
Esto creará una especie de conexión entre padre e hijo, donde actualizar uno actualizará automáticamente el otro.
<!-- Parent.svelte --> <script> import Child from './Child.svelte'; let state = "initial"; </script> <Child bind:state /> <!-- Child.svelte --> <script> export let state; function changeState() { state = "new value"; </script> <button on:click={changeState}>Click</button>Uso de eventos
Al igual que los elementos de utilería, los eventos se utilizan para transmitir información . Esto se puede usar si no desea una equivalencia estricta entre los dos estados y es un poco más versátil (pero también más detallado).
<!-- Parent.svelte --> <script> import Child from './Child.svelte'; let state = "initial" function handleChange(ev) { state = ev.detail.state } </script> <Child {state} on:change={handleChange} /> <!-- Child.svelte --> <script> import { createEventDispatcher } from 'svelte'; export let state const dispatch = createEventDispatcher() function changeState() { // first argument is the event name // second is an object placed in ev.detail dispatch('change', { state: "new value" }); } </script> <button on:click={changeState}>Click</button>Cuál de estos usar depende de usted y probablemente depende de la situación, pero ambos se benefician de que no dependen activamente de lo que sucede fuera del componente. Si nadie usó bind, el componente no le importa, todavía funciona. Si nadie está escuchando este evento, nuevamente al componente no le importa y sigue funcionando. Compare esto con la situación en la que no se pasa ninguna función, o la función tiene la firma incorrecta, de repente su componente depende de algo que no puede controlar y que no es un buen patrón.