如何使用条件返回不同的代码块 [英] How to return different blocks of code using conditional

问题描述

我正在我的 React 应用程序中进行测试，并且我从外部对象获取一个布尔值作为参数，通过检查该布尔值，我需要在我的视图中返回一个代码片段.

这是我检查值是真还是假的代码:

appInstance.get(myTest).then((值) => {if (value.something === true) {设置内容} 别的 {设置另一个内容}});

我必须根据我上面的条件在同一个返回不同的块中返回

 返回 (//如果 value.something === true，则显示此内容<h2>标题一</h2><p>一些文字</p>//别的<h2>标题二</h2><p>一些文字二</p>//下面的很多代码没有改变{...})

使用 react 执行此操作的最佳方法是什么?

解决方案

你可以使用 useState 来设置你想要呈现的内容，在你的 promise 在 useEffect.

const { useEffect, useState } = React;常量myTestApp = 'app',应用实例 = {获取(应用){返回 Promise.resolve({ something: true });}};const SuccessContent = () =>(<React.Fragment><h2>成功</h2><p>请求成功！</p></React.Fragment>);const FailureContent = () =>{<React.Fragment><h2>失败</h2><p>请求失败...</p></React.Fragment>};const 示例 = (props) =>{const [content, setContent] = useState(0);useEffect(() => {appInstance.get(myTestApp).then((值) => {if (value.something === true) {setContent();} 别的 {setContent();}});}, []);返回 (<div>{内容}<p>其余内容...</p>

);};ReactDOM.render(,document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script><div id="react"></div>

I'm doing an test here in my react application and I get a boolean as a parameter from an external object, by checking that boolean, I need to return a code snippet in my view.

This is my code that checks whether the value is true or false:

appInstance.get(myTest)
  .then((value) => {
    if (value.something === true) {
      setContent
    } else {
      setAnotherContent
    }
  });

I must return in the same return different blocks according to my conditional above

  return (
      // if value.something === true, show this content
      <h2>Title one</h2>
      <p>Some text</p>
      
      // else
      <h2>Title two</h2>
      <p>Some text two</p>

      // a lot of code below that doesn't change
      {...}
     )

What is the best way to do this using react?

解决方案

You can use useState to set the content you want to render, after your promise resolves inside of a useEffect.

const { useEffect, useState } = React;

const
  myTestApp = 'app',
  appInstance = {
    get(app) {
      return Promise.resolve({ something: true });
    }
  };

const SuccessContent = () => (
  <React.Fragment>
    <h2>Success</h2>
    <p>Request was successful!</p>
  </React.Fragment>
);

const FailureContent = () => {
  <React.Fragment>
    <h2>Failure</h2>
    <p>Request failed...</p>
  </React.Fragment>
};

const Example = (props) => {
  const [content, setContent] = useState(0);

  useEffect(() => {
     appInstance.get(myTestApp)
      .then((value) => {
        if (value.something === true) {
          setContent(<SuccessContent />);
        } else {
          setContent(<FailureContent />);
        }
      });
  }, []);

  return (
    <div>
      {content}
      <p>Rest of content...</p>
    </div>
  );
};

ReactDOM.render(<Example />,document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

这篇关于如何使用条件返回不同的代码块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！