javascript - 如何获取逗号分隔的数组并将其转换为单独的列表项？ React.js 和 JavaScript

Question

所以我有这个数组显示在 DOM 上，如下所示:

jamaican rum,fresh lime juice,simple syrup,Angostura Aromatic Bitters

但我想将它显示到 DOM，如下所示:

• 牙买加朗姆酒
• 新鲜酸橙汁
• 简单糖浆
• 安戈斯图拉芳香苦味酒

这就是我到目前为止在我的子组件中所拥有的。 recipeIngredients 是我想要转换为无序列表的列表:

    render(){
    const recipe = this.props.recipe;
    const recipeIngredients = recipe.ingredients.toString();
    return (
        <div>
            <li>{recipe.recipeName}</li>
            <li>{recipeIngredients}</li>

            <div>
                <img src={recipe.smallImageUrls} alt=""/>
            </div>
        </div>
    )
}

Answer 1

要创建无序列表，您不需要将 recipeIngredients 数组转换为字符串，直接对其运行循环并创建列表。

这样写:

render(){
    const recipe = this.props.recipe;
    const recipeIngredients = recipe.ingredients;

    return (
        <div>
            <li>{recipe.recipeName}</li>
            <li>

                <ul>
                    {recipeIngredients.map((el,i) => <li key={i}>{el}</li> )}
                </ul>

            </li>
            <div>
                <img src={recipe.smallImageUrls} alt=""/>
            </div>
        </div>
    )
}

工作代码:

class App extends React.Component{
  
  render(){
    const recipe = this.props.recipe;
    const recipeIngredients = recipe.ingredients;

    return (
      <div>
          <li>{recipe.recipeName}</li>
          <ul>
            {recipeIngredients.map((el,i) => <li key={i}>{el}</li> )}
          </ul>
          <div>
            <img src={recipe.smallImageUrls} alt=""/>
          </div>
      </div>
    )
  }
}

var arr = ["jamaican rum", "fresh lime juice", "simple syrup", "Angostura Aromatic Bitters"];

ReactDOM.render(<App recipe={{recipeName:"Hello", ingredients: arr, smallImageUrls: ''}}/>, document.body)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>