反應js | 條件渲染

Question

我在reactjs有條件渲染的問題。

問題

如果環境是 prod，則應加載<Sentry.ErrorBoundary>標記。

有沒有更好的方法來代替使用if和sentrytag和else而不使用sentrytag ？

代碼：

ReactDOM.render(
    <Provider store={store}>
        {environment == 'PROD' && <Sentry.ErrorBoundary> }
            <Experiment>
                <Root />
            </Experiment>
            {environment == 'PROD' && </Sentry.ErrorBoundary> }
    </Provider>, document.getElementById('root'));

Answer 1

有沒有更好的方法，而不是使用if with sentrytag和else without sentrytag

是的，您可以使用“包裝器”元素定義變量，如果不需要該元素，則可以使用“空” React.Fragment ：

const wrapper = (environment === 'PROD') ? Sentry.ErrorBoundary : React.Fragment;

<Provider store={store}>
    <wrapper>
        <Experiment>
            <Root />
        </Experiment>
    </wrapper>
</Provider>

---

小型工作演示，只是為了給出想法。

Error組件是 OP 示例中的Sentry.ErrorBoundary 。

按下按鈕切換“錯誤”狀態以啟用/禁用包裝器。

 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>