Передача массива в компонент React без сохранения состояния - PullRequest
Новая
       27

Передача массива в компонент React без сохранения состояния

0 голосов
/ 29 апреля 2019

Следуя примеру из книги Learn ReactJS, моя попытка передать массив таким же образом только приводит к ошибкам.

Из примеров Github по авторам: https://github.com/MoonHighway/learning-react/blob/master/chapter-04/03-react-components/04-components.html

 const IngredientsList = ({items}) =>
        React.createElement("ul", {className: "ingredients"},
            items.map((ingredient, i) =>
                React.createElement("li", { key: i }, ingredient)
            )
        )
    const items = [
        "1 lb Salmon",
        "1 cup Pine Nuts",
        "2 cups Butter Lettuce",
        "1 Yellow Squash",
        "1/2 cup Olive Oil",
        "3 cloves of Garlic"
    ]
    ReactDOM.render(
      React.createElement(IngredientsList, {items}, null),
      document.getElementById('react-container')
    )

Я поднял приложение React с create-react-app и написал следующее в App.js: 

const things = [
    'foo',
    'bar',
    'baz',
    'fizz',
    'buzz'
];

const App = ({things}) =>
    React.createElement("ul",{className: "thingsAndStuff"},
    things.map((item, value) =>
        React.createElement("li", {key:value}, item)
        )
    );

В index.js я имел ReactDom.render как: 

ReactDOM.render(React.createElement(App, null, null), document.getElementById('root'));

Я получил ошибку "things.map не функция". Когда я удалил деструктурированный things (const App = () => ...), мой компонент заработал.

Мои вопросы: 1. Как things втягивается в App (), когда оба были объявлены с const и, возможно, не в одной и той же области, а things специально не передается в функцию? 2. Сработал бы пример кода, если бы я сделал что-то другое?

Спасибо!

1 Ответ

0 голосов
/ 29 апреля 2019

реквизиты передаются в компонент при использовании createElement: 

  React.createElement(App, /*props:*/ { things });

Первый фрагмент делает это. Второй нет, и поэтому локальная переменная things будет undefined, и поэтому вы не можете перебирать ее. Если вы хотите получить доступ к глобальной переменной, вам просто нужно убедиться, что ни одна локальная переменная не имеет такого же имени, поэтому это также будет работать: 

const App = () => React.createElement("ul",
     { className: "thingsAndStuff" },
     things.map((item, value) =>
        React.createElement("li", {key:value}, item)
     )
);
...