代码之家 › 专栏 › 技术社区 › Sourabh Banka

validateDOMNesting(…):<span>不能显示为<option>的子级

react-intl reactjs

0

Sourabh Banka · 技术社区 · 8 年前

我正在使用 react-intl 为了内化。 validateDOMNesting(...): <span> cannot appear as a child of <option> 对于以下代码。

我没有使用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>

1 回复 | 直到 8 年前

1

Amruth 8 年前

通常 FormattedMessage 将返回span元素,为了忽略span元素,必须将选项传递给子属性 格式化消息

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