反应，使用表情符号，在下拉

Question

我一直工作在一个小游戏的反应，部分游戏允许玩家在开始之前设置一些设置。这是一个回合制游戏的标签，四名球员追逐周围的地图不同的令牌，同时避免标有“它”的一名球员。

我有以下渲染方法的选择选项：

render() {
    return (
        <div>
            <form onSubmit={this.createPlayers} ref="form">
                <label htmlFor="goodies">Choose a Goody!</label>
                <select name="goodies" id="goodies">
                    <option value="donut">🍩</option>
                    <option value="cookie">🍪</option>
                    <option value="hotdog">🌭</option>
                    <option value="bacon">🥓</option>
                    <option value="hamburger">🍔</option>
                    <option value="brocolli">🥦</option>
                </select>
                <button type="submit">Play!</button>
            </form>
        </div>
    );
}

我得到一个大的警告，说我需要包起来span元素，增加一些唱段标签，给他们错误的作用。

Line 18: Emojis should be wrapped in <span>, have role="img", and have an accessible description with aria-label or aria-labelledby jsx-a11y/accessible-emoji

我这样做，然后JSX拒绝编译，因为它是希望每个选项的字符串。它不会让我把选项标签之间的跨度。

我真的很想得到这样的警告消失，但是当我尝试做什么要求，该JSX将无法编译。有什么我必须做的，做不警告这项工作？

事情是，我使用的表情符号，其他地方我没有警告或不得以任何问题。

Answer 1

更新：您可能想创建一个表情符号像成分与表情符号组件<option>标签以下

    const Emoji = props => (
  <option
    className="emoji"
    role="img"
    aria-label={props.label ? props.label : ""}
    aria-hidden={props.label ? "false" : "true"}
    value={props.label}
  >
    {props.symbol}
  </option>
)

class MyComponent extends React.Component {
  render() {
    return (    
      <div> 
        <form onSubmit={this.createPlayers} ref="form">
            <label htmlFor="goodies">Choose a Goody!</label>
            <select onChange={(e)=>{console.log(e.target.value)}} name="goodies" id="goodies">
               <Emoji label="donut" symbol="🍩" />
               <Emoji label="cookie" symbol="🍪" />  
               <Emoji label="hotdog" symbol="🌭" />   
               <Emoji label="bacon" symbol="🥓" />  
               <Emoji label="hamburger" symbol="🍔" />   
               <Emoji label="brocolli" symbol="🥦" />                    
            </select>
            <button type="submit">Play!</button>
        </form>
      </div>
          
    )
  }
}

ReactDOM.render(<MyComponent />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Answer 2

添加在选择<span role="img" aria-label="xxxxx">这样

 <select name="goodies" id="goodies">
    <option value="donut">
       <span role="img" aria-label="donut">🍩</span> 
   </option>
   ....
  </select>