Question

我是一个非常新的和不熟悉的网站开发。

在我的项目中，当我尝试根据不同的事情控制要呈现的内容时，我在If方法中继续使用这些render()语句。

一个例子......

App = React.createClass({
    getInitialState(){
        return {validCode: false};
    },

    handleSubmit(code){
        var result = Meteor.call('validateCode', code);
        this.setState({validCode: result});
    },

    render() {

        if(this.state.validCode){
            return (
                <div>
                    <h1>Valid Code!!</h1>
                    <Menu />
                    <OtherComponentsOnlyVisibleWhenAuthorized />
                </div>
            );
        }
        else {
            return (
                <div>
                    <h1>Welcome</h1>
                    <InviteCodeInput onCodeSubmit={this.handleSubmit}/>
                </div>
            );
        }
    }
});

基本上我想验证一些用户输入。基于此，我要么以正常方式显示其余的网页组件，要么继续显示输入表单组件。

我只是觉得在渲染中使用if语句非常难看。此外，我从未见过另一个反应片段做类似的事情所以我猜这是一个禁忌。熟悉反应的人是否可以提出更好的方法？

Answer 1

TBH，我不认为这很重要，我确信有大量的组件都是这样写的。以下是reddit https://github.com/reddit/reddit-mobile/blob/master/src/views/components/Listing.jsx

的示例

如果你必须在渲染之外使用它，那么只需为它创建另一种方法

App = React.createClass({
    getInitialState(){
        return {validCode: false};
    },

    handleSubmit(code){
        var result = Meteor.call('validateCode', code);
        this.setState({validCode: result});
    },

    renderValidPage() {
        return (
            <div>
                <h1>Valid Code!!</h1>
                <Menu />
                <OtherComponentsOnlyVisibleWhenAuthorized />
            </div>
        ); 
    },

    renderInvalidPage() {
        return (
            <div>
                <h1>Welcome</h1>
                <InviteCodeInput onCodeSubmit={this.handleSubmit}/>
            </div>
        );
    }

    render() {
        return this.state.validCode ? renderValidPage() : renderInvalidPage();
    }
});

Answer 2

我不确定你的其余代码是做什么的，但是对于render方法中的代码组织，我会做这样的事情：

render: function() {

  var validDisplay = (
    <div>
      <h1>Valid Code!!</h1>
      <Menu />
      <OtherComponentsOnlyVisibleWhenAuthorized />
    </div>
  );

  var notValidDisplay = (
    <div>
      <h1>Welcome</h1>
      <InviteCodeInput onCodeSubmit
      {this.handleSubmit}/>
    </div>
  );

  return (
    {this.state.validCode ? validDisplay : notValidDisplay}
  );

}

希望这有帮助！

在render方法中避免使用If语句

2 个答案: