From 3d55501d6ac1157e85ad80ff591e72b9b5ab2f24 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Standa=20Luke=C5=A1?= Date: Sun, 11 Sep 2022 22:22:46 +0200 Subject: [PATCH] Pass setProps function to React components Since React does not have any standard way of writing values back, it does not make sense to attempt any automagic solution. This simply allows developers to handle the changes themselves If a property called `setProps` is used, it has precedence, so then it's not possible to update it --- src/Framework/JsComponent.React/dotvvm-react.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/Framework/JsComponent.React/dotvvm-react.tsx b/src/Framework/JsComponent.React/dotvvm-react.tsx index 42cff41be9..1eae9b75db 100644 --- a/src/Framework/JsComponent.React/dotvvm-react.tsx +++ b/src/Framework/JsComponent.React/dotvvm-react.tsx @@ -69,9 +69,20 @@ export class KnockoutTemplateReactComponent extends React.Component` syntax (or the JsComponent class) + * See [the complete guide](https://www.dotvvm.com/docs/4.0/pages/concepts/client-side-development/integrate-third-party-controls/react). + * + * The component will receive all properties, commands and templates as it's React props. + * * Properties are plain JS objects and values, notably they don't contain any knockout observables + * * Commands are functions returning a promise, optionally expecting arguments if they were specified in the dothtml markup + * * Templates are only string IDs which can be passed to the `` component + * + * Additional property `setProps` is passed to the component, which can be used to update the component's properties (if the bound expression is updatable, otherwise it will throw an error). + * * Usage: `props.setProps({ myProperty: props.myProperty + 1 })` + */ export const registerReactControl = (ReactControl, defaultProps = {}) => ({ - create: (elm, props, commands, templates) => { - const initialProps = { ...defaultProps, ...commands, ...templates } + create: (elm, props, commands, templates, setProps) => { + const initialProps = { setProps, ...defaultProps, ...commands, ...templates } let currentProps = { ...initialProps, ...props }; ReactDOM.render(, elm); return {