Как взять массив, разделенный запятыми, и преобразовать его в отдельные элементы списка? Реагировать.в JS и JavaScript

Question

Как взять массив, разделенный запятыми, и преобразовать его в отдельные элементы списка? Реагировать.в JS и JavaScript

Итак, у меня есть этот массив, который отображается на 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>

    )

}

596 2

javascript reactjs

2 ответов:

Comments

Ничего не найдено.

Mayank Shukla · Accepted Answer · 2018-01-13 07:25:50

Чтобы создать неупорядоченный список, вам не нужно преобразовывать массив 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>

bprdev · Accepted Answer · 2018-01-13 07:21:59

Для этого типа ситуации я предпочитаю использовать карту.
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