Блог

Я новичок в React.js и синтаксис JavaScript, но не нашел вопроса, отвечающего на синтаксис, который меня смущает ниже, так что вот оно!

При использовании массива в React.js, почему мне нужно использовать дополнительную точечную нотацию в переданной опоре для вызова свойства в массиве?

Например, в Content компоненте, почему я должен вводить part.parts[0].name ниже, когда в Java/C# я мог бы просто ввести parts[0].name ? Если я не сделаю этого выше, я получу ошибку «части[0].имя не определено«.

Приведенный ниже код взят из упражнения, поэтому я намерен разобраться в странной логике и исправить ошибки в качестве упражнения по исправлению плохого кода. Это не очень красиво, но мое решение ниже работает нормально, и есть еще код, который я не включаю, и мне интересно, почему я должен использовать дополнительную точечную нотацию… любое объяснение приветствуется!

Дайте мне знать, если моя логика неверна (и структура кода ужасна, я знаю), но если я передаю массив « course.parts непосредственно Content компоненту, разве JavaScript не должен быть в состоянии захватить свойства name и exercises , когда я передаю человека part Part компоненту?

  const App = () => {
      const course = {
        name: 'Half Stack application development',
        parts: [
            {
            number: '1'
            name: 'Fundamentals of React',
            exercises: 10
          },
          {
            number: '2'
            name: 'Using props to pass data',
            exercises: 7
          },
          {
            number: '3'
            name: 'State of a component',
            exercises: 14
          }
        ]
      }
    
      return (
        <div>
          <Header course={course.name} />
          <Content parts={course.parts} />
          <Total parts={course.parts} />
        </div>
      )
    }

const Part = (part) => {
  return (
    <>
      <h2>Part {part.number}: {part.name}</h2>
      <h3>{part.exercises} exercises</h3>
    </>
      )
}
    
    const Content = (parts) => {
      console.log(parts[0])
      return (
        <>
          <Part part={parts[0]} name={parts.parts[0].name} exercises={parts.parts[0].exercises} number={parts.parts[0].number} />
        </>
       )
     }
 

Первый аргумент, передаваемый функции компонента, представляет собой объект со свойствами для каждого из реквизитов компонента. Так что, если вы позвоните:

 <Content parts={x} />
 

… Content функция вызывается с помощью объекта со parts свойством на нем. Это значит, что если есть другие свойства, они могут быть переданы все вместе.

В компонентах функций react довольно часто используется деструктурирование объектов для выбора нужных реквизитов, например:

 const Content = ({parts}) => {
//               ^−−−−−^−−−−−−−−−−−−−−−− object destructuring
    return (
        <>
            <Part part={parts[0]} name={parts[0].name} exercises={parts[0].exercises} number={parts[0].number} />
        </>
    );
};
 

Это функционально эквивалентно:

 const Content = (props) => {
    const parts = props.parts;
    return (
        <>
            <Part part={parts[0]} name={parts[0].name} exercises={parts[0].exercises} number={parts[0].number} />
        </>
    );
};
 

Примечание: Нет необходимости использовать фрагмент, когда вы возвращаете только один элемент:

 const Content = ({parts}) => {
    return <Part part={parts[0]} name={parts[0].name} exercises={parts[0].exercises} number={parts[0].number} />;
};
 

или

 const Content = ({parts}) => {
    return <Part
        part={parts[0]}
        name={parts[0].name}
        exercises={parts[0].exercises}
        number={parts[0].number}
    />;
};
 

И если вы уже передаете часть, то, по-видимому , нет необходимости передавать name , exercises , и number отдельно; Part должны быть в состоянии получить их от объекта, который он получает в качестве своего part свойства. Что дало бы нам:

 const Content = ({parts}) => {
    return <Part part={parts[0]} />;
};
 

 <Content parts={course.parts} />
 

В основном в React эта строка означает функцию, у которой есть объект параметра, подобный function(params) , и в этой строке это будет похоже Content({ parts: course.parts })

таким образом, ваш код const Content = (parts) => {...} -это функция, которая принимает эти параметры.

Чтобы сделать это более понятным. вы можете переименовать parts в скобках, чтобы быть params или обычно props реагировать.

как props и объект.. вместо этого вы можете сделать что-то подобное..

const Content = ({ parts }) => {...} что означает разрушение (способ ES6) объекта на части. затем вы можете использовать его напрямую parts[0].name

Извините за странное объяснение.

Все переданные данные хранятся в объекте props. Вы должны получить доступ к переданному ключу, как к деталям в вашем случае, через объект props. Вы можете использовать деструкцию, например, const Part = ({ части }) =>. Потратьте некоторое время и прочитайте документацию.