Tengo un problema con la representación condicional en reactjs .
Si se produce un entorno, se debe cargar la etiqueta <Sentry.ErrorBoundary> .
¿Hay una mejor manera en lugar de usar if con sentrytag y else sin sentrytag ?
ReactDOM.render( <Provider store={store}> {environment == 'PROD' && <Sentry.ErrorBoundary> } <Experiment> <Root /> </Experiment> {environment == 'PROD' && </Sentry.ErrorBoundary> } </Provider>, document.getElementById('root'));¿Hay una mejor manera en lugar de usar
ifconsentrytagyelsesinsentrytag
Sí, podría definir una variable con el elemento 'envoltorio', o un React.Fragment 'vacío' si el elemento no es necesario:
const wrapper = (environment === 'PROD') ? Sentry.ErrorBoundary : React.Fragment; <Provider store={store}> <wrapper> <Experiment> <Root /> </Experiment> </wrapper> </Provider>Pequeña demostración de trabajo, solo para dar una idea.
El componente Error es Sentry.ErrorBoundary en el ejemplo de OP.
Presione el botón para alternar el estado de 'error' para habilitar/deshabilitar la envoltura.
const Error = (props) => ( <div> <h1>{'Omg; error!'}</h1> {props.children} </div> ); const Example = () => { const [ err, setErr ] = React.useState(true); const Wrapper = (err) ? Error : React.Fragment; return ( <div> <Wrapper> Hello! </Wrapper> <br /><br /><br /> <button onClick={() => setErr(!err)}>Toggle</button> </div> ) } ReactDOM.render(<Example />, document.getElementById("app")); <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> <div id="app"></div>