validateDOMNesting(...): <span> 不能作为 <option> 的子项出现

Question

我正在使用 react-intl 进行内化。我收到以下代码的错误 validateDOMNesting(...): <span> cannot appear as a child of <option>。

我没有使用跨度。但是在检查元素时它会自动采用跨度。

代码如下：

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

Answer 1

通常 FormattedMessage 会 return span 元素，为了忽略 span 元素，你必须将选项传递给 FormattedMessage.

中的 children 属性

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

validateDOMNesting(...): <span> 不能作为 <option> 的子项出现

validateDOMNesting(...): <span> cannot appear as a child of <option>

reactjs

react-intl