Reactjs validateDOMNesting(…):不能显示为的子级

Reactjs validateDOMNesting(…):不能显示为的子级,reactjs,react-intl,Reactjs,React Intl,我正在使用react intl进行内部化。 我收到错误validateDOMNesting…:无法显示为以下代码的子级 我没有使用span。但在检查元件时,它会自动获取跨度 代码如下: <select onChange={this.localeChageHandler}> <option value="english"> <FormattedMessage id="navigation.header.navbar.english"

我正在使用react intl进行内部化。 我收到错误validateDOMNesting…:无法显示为以下代码的子级

我没有使用span。但在检查元件时,它会自动获取跨度

代码如下:

<select onChange={this.localeChageHandler}>
   <option value="english">
      <FormattedMessage
        id="navigation.header.navbar.english"
        defaultMessage="English"
      />
   </option>
   <option value="hindi">
     <FormattedMessage id="navigation.header.navbar.hindi" defaultMessage="HIndi" />
   </option>
</select>
通常FormattedMessage将返回span元素,为了忽略span元素,您必须将选项传递给FormattedMessage中的子属性

    <select onChange={this.localeChageHandler}>
              <FormattedMessage
                id="navigation.header.navbar.english"
                defaultMessage="English"
                children={
                  (formatedMessage) => <option value="English">{formatedMessage}</option>
                }
              />
          <FormattedMessage
                id="navigation.header.navbar.hindi"
                defaultMessage="HIndi"
                children= {
                  (formatedMessage) => <option value="HIndi">{formatedMessage}</option>
                }
              />
        </select>