This product is not supported for your selected
Datadog site. (
).
Cette page n'est pas encore disponible en français, sa traduction est en cours.
Si vous avez des questions ou des retours sur notre projet de traduction actuel,
n'hésitez pas à nous contacter.
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
Documentation, liens et articles supplémentaires utiles:
