如何采用逗号分隔的数组并将其转换为单个列表项？ React.js和Javascript

Question

因此，我将这个数组显示在DOM上，如下所示：

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

但我想像这样将其显示给DOM：

• 牙买加朗姆酒
• 鲜青柠汁
• 简单的糖浆
• Angostura芳香苦味剂

到目前为止，这是我的孩子部分的内容。 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> 

Answer 2

对于这种情况，我更喜欢使用map。

render() {
    let recipeArray = [
      "jamaican rum",
      "fresh lime juice",
      "simple syrup",
      "Angostura Aromatic Bitters"
    ];
    let items = recipeArray.map((item, index) => <li key={index}>{item}</li>);
    return (
      <div>
        <ul>{items}</ul>
      </div>
    );
  }

这是指向工作代码的CodePen链接： https ://codepen.io/anon/pen/ypEvVm