Return JSX 从组件方法到渲染方法

Question

我对 React 还是个新手。我正在尝试在 class 组件下的另一种方法中定义的条件下呈现 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()}，但我从未从该方法中得到 return。我做错了什么？因为我在这里处理状态，所以我不知道如何使用外部函数来做到这一点。由于某种原因，此函数从未被调用过。请帮忙！

Answer 1

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

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
  )
}

Return JSX 从组件方法到渲染方法

Return JSX from component method to render method

javascript

function

jsx

reactjs

react-component