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元素。对于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>
       )
}

您可以将上述内容视为

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

现在执行您正在执行的操作效率相当低，因为在每次状态更改时，都会返回一个新元素。相反，您需要做的只是更改输入的值和禁用属性

datagridview

Answer 2

这是用于嵌入值的常用{...} JSX表达式表示法中的对象，然后代码从中选择属性。

代码创建一个对象（内部{}），然后在其上查找名称为this.state._saveStatus的属性;这将成为{...}表达式的值。

例如，如果this.state._saveStatus为"SUCCESS"，则整体{...}表达式的计算结果为<input value='Saved!' type='submit' disabled />

这是一种相当低效的方式来做它做的事情。它创建了一个对象和几个元素（涉及到封面下的React.createElement的函数调用），只是为了丢弃它们并保留它想要的那个。相反，SFC将是更好的选择（并且可重复使用）：

const StatusElement = props => {
    switch (props.status) {
        case "SAVING":
            return <input value='Saving...' type='submit' disabled />;
        case "SUCCESS":
            return <input value='Saved!' type='submit' disabled />;
        case "ERROR":
            return <input
                  value='Save Failed - Retry?'
                  type='submit'
                  disabled={props.disabled}
                />;
        case "READY":
            return <input
                  value='Submit'
                  type='submit'
                  disabled={props.disabled}
                />;
    }
};

然后：

<StatusElement status={this.state._saveStatus} disabled={this.validate()} />

Answer 3

这是一个对象？

是。它是bracket notation，用于通过动态密钥获取数据。

如果你打破它，它将成为：

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()}
    />,
}

然后按this.state._saveStatus值获取值：

{obj[this.state._saveStatus]}

现在只需将obj替换为其内容，您就会得到您在问题中所写的内容。基本上该对象包含使用JSX的键映射，而this.state._saveStatus将包含SAVING, SUCCESS, ERROR, READY中的任何一个键。如果您看到该表达式的最终结果，那么它将是任何一个JSX。

反应对象表达？

3 个答案: