이 페이지는 아직 한국어로 제공되지 않습니다. 번역 작업 중입니다.
현재 번역 프로젝트에 대한 질문이나 피드백이 있으신 경우
언제든지 연락주시기 바랍니다.The React renderer enables users to create fully custom UI components using the language and libraries they already know. This component gives builders access to React APIs so they can create flexible, dynamic, and visually impactful apps in App Builder.
This page provides an example of how to use the React renderer component. For a full reference to all of the fields in the React renderer, see Components.
Example component definition
const App = (props) => {
// Local component state
const [localState, setLocalState] = React.useState(0);
// Access shared state from props
const { count = 0 } = props.state;
const incrementShared = () => {
// Update shared state that persists outside component
props.setComponentState({...props.state, count: count + 1});
};
return (
<div>
<h3>Shared Count: {count}</h3>
<button onClick={incrementShared}>Increment Shared</button>
</div>
);
}
return App;
${{
queryData: query0.outputs,
name: global?.user?.name,
state: self.state,
}}
Example initial component state
${{
count: 0,
items: [],
isLoading: false,
selectedId: null,
}}
Further reading
