将 JSX 从组件方法返回到渲染方法

Posted 2023-02-21

【中文标题】将 JSX 从组件方法返回到渲染方法

【英文标题】：Return JSX from component method to render method

【发布时间】：2018-10-01 18:41:37

【问题描述】：

我还是 React 新手。我正在尝试在我的类组件下的另一个方法中定义的条件下呈现 jsx，如下所示：

isWinner = () => 
 let userVotesCount1 = this.state.user1.userVotesCount;
 let userVotesCount2 = this.state.user2.userVotesCount;
 if (userVotesCount1 > userVotesCount2) 
   userVotesCount1++;
   this.setState( user1:  userVotesCount: userVotesCount1  );
   return (
     <h3>Winner</h3>
   );
 
 userVotesCount2++;
 this.setState( user2:  userVotesCount: userVotesCount2  );
 return (
   <h3>Loser</h3>
 );

我在渲染方法中调用这个方法

<Dialog
   open=open
   onRequestClose=this.onClose
      >
 <div>
   <isWinner />
 </div>
 </Dialog>

已经尝试将<isWinner /> 替换为() => this.isWinner()，但我从未从该方法中获得回报。我做错了什么？因为我在这里处理状态，所以我不知道如何使用外部函数来做到这一点。由于某种原因，这个函数永远不会被调用。请帮忙！

【问题讨论】：

How to Call a Function inside a Render in React/Jsx的可能重复

【参考方案1】：

你快到了。你要做的就是使用方法设置一个标志，然后在render方法中使用标志进行条件渲染。

constructor(props) 
  ...
  this.state = 
    isWinner: false,
    ...
  

isWinner() 
  ...,
  const isWinner = __predicate__ ? true : false;
  this.setState(
    isWinner: isWinner
  );


render() 
  const  isWinner  = this.state;
  return isWinner ? (
    // jsx to return for winners
  ) : (
    // jsx to return for lossers
  )

【讨论】：

这实际上渲染了 JSX，但是无论我选择什么，它都只会渲染失败者。此外，该州有 2 个用户，他们还有 2 个属性。我知道 setState 是异步的，并且在这段代码中有很多。不应该有超时或什么的。如果有，该怎么做？

你有太多的事情没有在示例中展示给你一个好的答案，而不仅仅是为你编写代码。为什么不为您的项目创建一个code sandbox 并将其链接到此处。如果到时候你还没有得到帮助或想通的话，我明天帮你调试。

codesandbox.io/s/2m4m7x2yn 就是这样。我尝试了您的解决方案，但我认为这与 setState 方法有关。

没关系，我的逻辑有问题。都解决了，谢谢帮助。