Question

我有一个多字段表单，我正在尝试在用户输入错误信息时显示一个小表单警告。我遇到的问题是表单不会正确显示所需输入下的警告。有人告诉我，这是因为Form警告是绝对定位的，因此沿着那条非静态定位的父母会抛弃对齐。

建议在componentWillMount（）中使用.append或.after将表单警告组件放在正文中，这样FormWarning组件可以绝对定位到窗口。对我有意义，但我的尝试只是在我页面底部的[对象对象]。

任何人都可以提供任何有关这种情况发生的原因以及我可以采取哪些措施来解决这个问题？我尝试了多种不同的方法，但没有任何效果。我总是得到[object Object]

componentWillMount(){
   this.formWarningToBody();

}

formWarningToBody = () => {
  let form =[]
  form.push(<FormWarning visible={this.state.formWarning.visible} 
invalidInputID={this.state.formWarning.invalidInputID} text=
{this.state.formWarning.text}/>)
  document.body.append({form})
}

render() {
    if (this.state.isSubmitted) return <Redirect to="/order" />
    let CustomTag = this.props.labels ? 'label' : 'span',
    { inputs, saveInputVal, styles, state } = this,
    { formWarning, submitting } = state,
    { invalidInputID, text, visible } = formWarning

return (
  <div style={this.styles.formWrapper}>
    {
      typeof this.props.headerText === 'string'
        ? ( <h2 style={this.styles.formHeader}>{this.props.headerText}</h2> )
        : this.props.headerText.map((text) => {
          return <h2 key={text} style={this.styles.formHeader} className={'header'+this.props.headerText.indexOf(text)}>{text}</h2>
        })
    }
    <form onSubmit={this.submit} style={this.styles.form}>
      <FormOneInputs inputs={inputs} saveInputVal={saveInputVal} CustomTag={CustomTag} styles={styles} />
      <button style={this.styles.button}>{this.props.buttonText}</button>

    </form>
    <Throbber throbberText='Reserving your order...' showThrobber={submitting} />
  </div>
)
  }
}

Answer 1

这不是React的工作方式，你不能只是将JSX推送到DOM，因为JSX元素确实是一个对象，然后呈现为HTML。您可以使用React Portals。

请参阅文档：header guards

当尝试.append（）一些JSX到正文时，我得到[object Object] ...

1 个答案: