Question

我一直在从事一个小游戏的反应，部分游戏允许玩家在开始之前进行一些设置。这是一种基于回合的标签游戏，四名玩家在地图上追逐不同的代币，同时避开了一个标有“ it”的玩家。

对于选择选项，我具有以下渲染方法：

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

我发现将表情符号与react结合使用的一种方式是以下基于表情符号Unicode的语法。

尝试一下：

{`\u{1f369}`}

所以您的代码将是：

render() {
    return (
        <div>
            <form onSubmit={this.createPlayers} ref="form">
                <label htmlFor="goodies">Choose a Goody!</label>
                <select name="goodies" id="goodies">
                    <option value="donut">{`\u{1f369}`}</option>
                    <option value="cookie">{`\u{1f36a}`}</option>
                    <option value="hotdog">{`\u{1f32d}`}</option>
                    <option value="bacon">{`\u{1f953}`}</option>
                    <option value="hamburger">{`\u{1f354}`}</option>
                    <option value="brocolli">{`\u{1f966}`}</option>
                </select>
                <button type="submit">Play!</button>
            </form>
        </div>
    );
}

It may not work for every emoji.

Answer 2

更新：您可能想为Emoji表情创建一个组件，例如在Emoji表情组件中添加<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 3

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

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

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

3 个答案: