React，在下拉菜单中使用表情符号

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 元素中，添加一些 aria 标签并给它们一个错误的角色。

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

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

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

Answer 2

更新：您可能想为表情符号创建一个组件，例如<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>