代码之家 › 专栏 › 技术社区 › user3378165

不嵌套三元表达式-可选

reactjs javascript

user3378165 · 技术社区 · 7 年前

export default class Home extends React.Component {
  state = {
    isAdmin: false
  };

  render() {
    const { isAdmin } = this.state;
    return (
      <div>
        <Header />
        <div css={innerWrap}>
          {isAdmin ? (
            <Button
              onClick={this.handleAddNewContact }
            >
              Add new Contact
            </Button>
          ) : (
            ''
          )}
   {searchMode === searchModes.advisoryPanels ? (
            <>
              <SearchAdvisoryPanels />
              <div css={{ textAlign: 'center', margin: '60px auto' }}>
                <ManAtDesk />
              </div>
            </>
          ) : searchMode === searchModes.noResultsPanel ? (
            <SearchNoResultsPanel />
          ) : searchMode === searchModes.resultsPanel ? (
            accountInfo.map((info, index) => (
              <SearchResultPanel info={info} isAdmin={isAdmin} key={index} />
            ))
          ) : searchMode === searchModes.addContactPanel ? (
            <AddNewContactForm
              onCancelAccount={this.onCancelAccount}
              onSaveAccount={this.onSaveAccount}
            />
          ) : null}
        </div>
      </div>
    );
  }
}

请告知。

3 回复 | 直到 7 年前

Vlatko Vlahek 7 年前

export default class Home extends React.Component {
  state = {
    isAdmin: false
  };

  onCancelAccount = () => {};
  onSaveAcciont = () => {};

  renderSearchResults = (searchMode) => {
    const { info, isAdmin, index } = this.props;

    switch (searchMode) {
      case searchModes.advisoryPanels:
        return this.renderAdvisoryPanels();
      case searchModes.noResultsPanel:
        return <SearchNoResultsPanel />;
      case searchModes.resultsPanel:
        return <SearchResultPanel info={info} isAdmin={isAdmin} key={index} />;
      case searchModes.addContactPanel:
        return (
          <AddNewContactForm
            onCancelAccount={this.onCancelAccount}
            onSaveAccount={this.onSaveAccount}
          />
        );
      default:
        return null;
    }
  }

  renderAdvisoryPanels = () => (
    <React.Fragment>
      <SearchAdvisoryPanels />
      <div css={{ textAlign: 'center', margin: '60px auto' }}>
        <ManAtDesk />
      </div>
    </React.Fragment>
  );

  render() {
    const { isAdmin } = this.state;

    return (
      <div>
        <Header />
        <div css={innerWrap}>
          {isAdmin && (
            <Button onClick={this.handleAddNewContact}>Add new Contact</Button>
          )}
          {this.renderSearchResults(searchMode)}
        </div>
      </div>
    );
  }
}

在您的示例中,有些处理程序/道具无法立即看到,因此,如果我出错,请修复。

Treycos 7 年前

我正要写回信,这时你用一个switch语句问了这个问题。

render() {
    const { isAdmin } = this.state;
    return (
        <div>
            <Header />
            <div css={innerWrap}>
                {isAdmin && <Button onClick={this.handleAddNewContact}> Add new Contact</Button>}
                {
                    {
                        [searchModes.SearchAdvisoryPanels]: (
                            <>
                                <SearchAdvisoryPanels />
                                <div css={{ textAlign: 'center', margin: '60px auto' }}>
                                    <ManAtDesk />
                                </div>
                            </>
                        ),
                        [searchModes.noResultsPanel]: <SearchNoResultsPanel />,
                        [searchModes.resultsPanel]: accountInfo.map((info, index) => (<SearchResultPanel info={info} isAdmin={isAdmin} key={index} />)),
                        [searchModes.addContactPanel]: <AddNewContactForm  onCancelAccount={this.onCancelAccount} onSaveAccount={this.onSaveAccount} />
                    }[searchMode]
                }
            </div>
        </div>
    );
}

但是,此解决方案将安装所有组件,即使它们未显示,使用箭头功能可以通过仅安装所需组件来提高性能:

render() {
    const { isAdmin } = this.state;
    return (
        <div>
            <Header />
            <div css={innerWrap}>
                {isAdmin && <Button onClick={this.handleAddNewContact}> Add new Contact</Button>}
                {
                    {
                        [searchModes.SearchAdvisoryPanels]: () => (
                            <>
                                <SearchAdvisoryPanels />
                                <div css={{ textAlign: 'center', margin: '60px auto' }}>
                                    <ManAtDesk />
                                </div>
                            </>
                        ),
                        [searchModes.noResultsPanel]: () => <SearchNoResultsPanel />,
                        [searchModes.resultsPanel]: () => accountInfo.map((info, index) => (<SearchResultPanel info={info} isAdmin={isAdmin} key={index} />)),
                        [searchModes.addContactPanel]: () => <AddNewContactForm  onCancelAccount={this.onCancelAccount} onSaveAccount={this.onSaveAccount} />
                    }[searchMode]()
                }
            </div>
        </div>
    );
}

编辑

如果值未定义,则发送不执行任何操作的函数:

}[searchMode] || (x => x)()

或者将结果存储在返回之外,并调用函数(如果存在):

render() {
    const { isAdmin } = this.state;
    const searchRender = {
        [searchModes.SearchAdvisoryPanels]: () => (
            <>
                <SearchAdvisoryPanels />
                <div css={{ textAlign: 'center', margin: '60px auto' }}>
                    <ManAtDesk />
                </div>
            </>
        ),
        [searchModes.noResultsPanel]: () => <SearchNoResultsPanel />,
        [searchModes.resultsPanel]: () => accountInfo.map((info, index) => (<SearchResultPanel info={info} isAdmin={isAdmin} key={index} />)),
        [searchModes.addContactPanel]: () => <AddNewContactForm onCancelAccount={this.onCancelAccount} onSaveAccount={this.onSaveAccount} />
    }[searchMode]

    return (
        <div>
            <Header />
            <div css={innerWrap}>
                {isAdmin && <Button onClick={this.handleAddNewContact}> Add new Contact</Button>}
                {searchRender && searchRender()}
            </div>
        </div>
    );
}

编辑:这是什么黑魔法?

computed properties ,它允许您从变量而不是硬编码的值分配对象键:

const searchModes = {
    SearchAdvisoryPanels: "a",
    noResultsPanel: "b",
    resultsPanel: "c",
    addContactPanel: "d"
}

const result = {
    [searchModes.SearchAdvisoryPanels]: 1,
    [searchModes.noResultsPanel]: 2 ,
    [searchModes.resultsPanel]: 3,
    [searchModes.addContactPanel]: 4
}

console.log(result)

我们现在可以替换这些值 1 2 3 4

const searchModes = {
    SearchAdvisoryPanels: "a",
    noResultsPanel: "b",
    resultsPanel: "c",
    addContactPanel: "d"
}

const search = "c"

const result = {
    [searchModes.SearchAdvisoryPanels]: 1,
    [searchModes.noResultsPanel]: 2 ,
    [searchModes.resultsPanel]: 3,
    [searchModes.addContactPanel]: 4
}[search]

console.log(result)

如果返回的值转换为函数,则只需在事件末尾添加括号即可调用:

const searchModes = {
    SearchAdvisoryPanels: "a",
    noResultsPanel: "b",
    resultsPanel: "c",
    addContactPanel: "d"
}

const search = "c"

const result = {
    [searchModes.SearchAdvisoryPanels]: () => 1,
    [searchModes.noResultsPanel]: () => 2 ,
    [searchModes.resultsPanel]: () => 3,
    [searchModes.addContactPanel]: () => 4
}[search]()

console.log('Short : ' + result)

//Long syntax :

const options = {
    [searchModes.SearchAdvisoryPanels]: () => 1,
    [searchModes.noResultsPanel]: () => 2 ,
    [searchModes.resultsPanel]: () => 3,
    [searchModes.addContactPanel]: () => 4
}

const action = options[search]

const output = action()

console.log('Long : ' + output)

enapupe 7 年前

这是你应该经常在JS上做的,把东西移到fn上。这种方法可以保持渲染fn清晰。您的getSearchMode有一个清晰的读数,没有发生任何复杂的事情。您没有设置一个不必要的对象,没有在渲染函数中创建许多函数,也没有做任何魔术——只是简单的旧JS。

export default class Home extends React.Component {
  state = {
    isAdmin: false,
  }

  getSearchMode = (searchMode) => {
    if (searchMode === searchModes.advisoryPanels) {
      return (
        <>
          <SearchAdvisoryPanels />
          <div css={{ textAlign: 'center', margin: '60px auto' }}>
            <ManAtDesk />
          </div>
        </>
      )
    }
    if (searchMode === searchModes.noResultsPanel) {
      return <SearchNoResultsPanel />
    }
    if (searchMode === searchModes.resultsPanel) {
      return accountInfo.map((info, index) => (
        <SearchResultPanel info={info} isAdmin={this.state.isAdmin} key={index} /> // you should not use index as key
      ))
    }
    if (searchMode === searchModes.addContactPanel) {
      return (
        <AddNewContactForm
          onCancelAccount={this.onCancelAccount}
          onSaveAccount={this.onSaveAccount}
        />
      )
    }
    return null
  }

  render() {
    const { isAdmin } = this.state
    return (
      <div>
        <Header />
        <div css={innerWrap}>
          {isAdmin ? <Button onClick={this.handleAddNewContact}>Add new Contact</Button> : ''}
          {this.getSearchMode(searchMode)}
        </div>
      </div>
    )
  }
}