javascript - react 对象表达？

Question

我有以下 render 功能:

return (
  <div>
    <h1>Sign Up Sheet</h1>

    <form onSubmit={this.onFormSubmit}>

      <Field
        placeholder='Name'
        name='name'
        value={this.state.fields.name}
        onChange={this.onInputChange}
        validate={(val) => (val ? false : 'Name Required')}
      />

      <br />

      <Field
        placeholder='Email'
        name='email'
        value={this.state.fields.email}
        onChange={this.onInputChange}
        validate={(val) => (isEmail(val) ? false : 'Invalid Email')}
      />

      <br />

      <CourseSelect
        department={this.state.fields.department}
        course={this.state.fields.course}
        onChange={this.onInputChange}
      />

      <br />

      {{
        SAVING: <input value='Saving...' type='submit' disabled />,
        SUCCESS: <input value='Saved!' type='submit' disabled />,
        ERROR: <input
          value='Save Failed - Retry?'
          type='submit'
          disabled={this.validate()}
        />,
        READY: <input
          value='Submit'
          type='submit'
          disabled={this.validate()}
        />,
      }[this.state._saveStatus]}

    </form>

    <div>
      <h3>People</h3>
      <ul>
        { this.state.people.map(({ name, email, department, course }, i) =>
          <li key={i}>{[ name, email, department, course ].join(' - ')}</li>
        ) }
      </ul>
    </div>
  </div>
   );
  }
 };  

表达式是什么？

  {{
    SAVING: <input value='Saving...' type='submit' disabled />,
    SUCCESS: <input value='Saved!' type='submit' disabled />,
    ERROR: <input
      value='Save Failed - Retry?'
      type='submit'
      disabled={this.validate()}
    />,
    READY: <input
      value='Submit'
      type='submit'
      disabled={this.validate()}
    />,
  }[this.state._saveStatus]}  

它是一个对象吗？

Answer 1

根据保存的状态，它会从对象中返回所需的 JSX 元素。例如如果this.state._saveStatus是SAVING , 它会返回给你 <input value='Saving...' type='submit' disabled />

{{
    SAVING: <input value='Saving...' type='submit' disabled />,
    SUCCESS: <input value='Saved!' type='submit' disabled />,
    ERROR: <input
      value='Save Failed - Retry?'
      type='submit'
      disabled={this.validate()}
    />,
    READY: <input
      value='Submit'
      type='submit'
      disabled={this.validate()}
    />,
  }[this.state._saveStatus]}

你可以这样想

render() {
    const obj = {
        SAVING: <input value='Saving...' type='submit' disabled />,
        SUCCESS: <input value='Saved!' type='submit' disabled />,
        ERROR: <input
          value='Save Failed - Retry?'
          type='submit'
          disabled={this.validate()}
        />,
        READY: <input
          value='Submit'
          type='submit'
          disabled={this.validate()}
        />,
      }

      return (
          <div>{obj[this.state._saveStatus]}</div>
       )
}

现在做你正在做的事情是相当低效的，因为在每次状态改变时，都会返回一个新元素。相反，您需要做的只是更改 input 的 value 和 disabled 属性

return (
  <div>
    <h1>Sign Up Sheet</h1>

    <form onSubmit={this.onFormSubmit}>

      <Field
        placeholder='Name'
        name='name'
        value={this.state.fields.name}
        onChange={this.onInputChange}
        validate={(val) => (val ? false : 'Name Required')}
      />

      <br />

      <Field
        placeholder='Email'
        name='email'
        value={this.state.fields.email}
        onChange={this.onInputChange}
        validate={(val) => (isEmail(val) ? false : 'Invalid Email')}
      />

      <br />

      <CourseSelect
        department={this.state.fields.department}
        course={this.state.fields.course}
        onChange={this.onInputChange}
      />

      <br />

      <MessageField saveStatus={this.state._saveStatus} validate={this.validate()} />

    </form>

    <div>
      <h3>People</h3>
      <ul>
        { this.state.people.map(({ name, email, department, course }, i) =>
          <li key={i}>{[ name, email, department, course ].join(' - ')}</li>
        ) }
      </ul>
    </div>
  </div>
   );
  }
 };  


const MessageField = ({ saveStatus, validate }) => {
   const value = undefined;
   const disabled = true;
   switch(saveStatus) {
       case 'SAVING': value='Saving...';  disabled=true; break;
       case 'SUCCESS': value='Saved!'; disabled=true; break;
       case 'ERROR': value='Save Failed - Retry?';
          disabled=validate();
          break;
       case 'READY': value='Submit';
          disabled=validate();
          break;
   }
   return <input type={submit} disabled={disabled} value={value} />
}