Question

您好，我想在渲染器中使用三元条件，但是我遇到了一些错误，这是我的代码：

render() {
    return (
      <div>
        <div className="isoInputWrapper">
                <Input 
                  ref={email => (this.email = email)}
                  size="large"
                  placeholder="Email"
                  value={this.state.email}
                  onChange={event => {
                    this.setState({ email: event.target.value });
                  }}
                 />
              </div>

              <div className="isoInputWrapper">
                <Input 
                  type="password"
                size="large"
                placeholder="Senha"
                value={this.state.password}
                onChange={event => {
                  this.setState({ password: event.target.value });
                }}
                 />

                {this.props.signup?}

                 <Input 
                  type="password"
                size="large"
                placeholder="Senha"
                value={this.state.password}
                onChange={event => {
                  this.setState({ password: event.target.value });
                }}
                 /> 

                {: do something }

Answer 1

三元组之前需要打开大括号，三元组结束后需要关闭大括号：

{this.props.signup ?

                 <Input 
                  type="password"
                size="large"
                placeholder="Senha"
                value={this.state.password}
                onChange={event => {
                  this.setState({ password: event.target.value });
                }}
                 /> 

                : <div>test</div> }

Answer 2

这是正确的语法：

    render() {
        return (
          <div>
            <div className="isoInputWrapper">
                    <Input 
                      ref={email => (this.email = email)}
                      size="large"
                      placeholder="Email"
                      value={this.state.email}
                      onChange={event => {
                        this.setState({ email: event.target.value });
                      }}
                     />
                  </div>

                  <div className="isoInputWrapper">
                    <Input 
                      type="password"
                    size="large"
                    placeholder="Senha"
                    value={this.state.password}
                    onChange={event => {
                      this.setState({ password: event.target.value });
                    }}
                     />

                    {this.props.signup
                     ? <Input 
                          type="password"
                          size="large"
                          placeholder="Senha"
                          value={this.state.password}
                          onChange={event => {
                              this.setState({ password: event.target.value });
                          }}
                       /> 

                    : <div>do something else </div>
                    }

Answer 3

反应括号应包含有效的JavaScript表达式。 this.props.signup?不是三元且无效。

应该是：

{this.props.signup ?

     <Input 
      type="password"
    size="large"
    placeholder="Senha"
    value={this.state.password}
    onChange={event => {
      this.setState({ password: event.target.value });
    }}
     /> 

: do something}

请注意，do something也应该是表达式。

在渲染器内部反应三元

3 个答案: