Подтвердить что ты не робот

Интеграция и рендеринг карт-ответчиков

Я очень ноб с reactJs, на самом деле я только что закончил этот курс и боюсь с некоторыми концепциями здесь.

Я готов создать приложение для людей, чтобы выразить свои предпочтения в отношении предметов для информационного бюллетеня, и выхватил очень полный список тем (2k +) и хотел бы сделать какой-нибудь интересный способ их выбрать, поэтому я считаю, что что-то похожее на прокручиваемые карты Tinder было бы идеально подходящим, поэтому я пытаюсь реализовать создал Repo, в котором у меня было несколько попыток без везения.

В принципе, пример, приведенный в документации модуля, гласит, что он должен начинаться с

const data = ['Alexandre', 'Thomas', 'Lucien', 'Raphael', 'Donatello', 'Michelangelo', 'Leonardo']


const Wrapper = () => {
  return (
      <Cards onEnd={console.log("action('end')")} className='master-root'>
        {data.map(item => 
          <Card 
            onSwipeLeft={console.log("action('swipe left')")} 
            onSwipeRight={console.log("action('swipe right')")}>
            <h2>{item}</h2>
          </Card>
        )}
      </Cards>
  )
}

Но я полностью потерял его, я предположил, что он должен предоставить мне компонент React <Something />, но вместо этого он генерирует что-то в строках функции, которая возвращает div, которая много выглядит с компонент, но я не знаю, как интегрироваться в этот пример.

Примечание. На графике репо я заметил, что есть еще один разработчик, который внес некоторые корректировки, чтобы сделать его совместимым с ответом 16.xx. бета, я тоже попробовал, не повезло.

Я почти уверен, что есть некоторые понятия, которые мне не хватает здесь, поэтому любая ссылка более чем приветствуется.

4b9b3361

ОТВЕТЫ

Ответ 1

Что вы ищете, это функциональный компонент без гражданства, ниже код

const Wrapper = () => {
  return (
    <Cards onEnd={console.log("action('end')")} className='master-root'>
      {data.map(item =>
        <Card
          key={item}
          onSwipeLeft={() => {console.log("action('swipe left')")}}
          onSwipeRight={() => {console.log("action('swipe right')")}}>
          <h2>{item}</h2>
        </Card>
      )}
    </Cards>
  )
}

является функциональной составляющей.

В соответствии с документация

Функциональные и классные компоненты

Самый простой способ определить компонент - написать JavaScript Функция:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Эта функция является действительной компонентой React, потому что она принимает один "реквизит" (который обозначает свойства) аргумент объекта с данными и возвращает элемент React. Такие компоненты мы называем "функциональными", потому что это буквально функции JavaScript.

Способ рендеринга компонента функции аналогичен тому, как вы создадите нормальный компонент React

<Wrapper {...props} />  // {...props} is a spread operator syntax to just pass all the props down to wrapper you can pass selected props too

Также react-swipe-card не предоставляет вам Wrapper functional component, он предоставляет вам такие компоненты, как Cards и Card, которые вы использовали для отображения вида карты в Wrapper Component

импортировать карты, {Карточка} из "реактивной карты-салфетки" Теперь в вашем случае это будет выглядеть как

export default class MyCards extends Component {

  render() {
    return <Wrapper />;
  }
}

Однако, поскольку у вас нет состояния, а также вы не используете функции жизненного цикла, вы можете просто написать вышеупомянутый компонент MyCards как

export const MyCards= () => {
    return <Wrapper />;
}

Я, однако, предполагаю, что вы в конце концов напишете какую-то логику и, следовательно, сохраните ее как компонент, отвечающий за состояние. Я также включаю логику, с помощью которой вы будете обрабатывать изменение состояния слева или писать салфетки.

Проверить рабочее DEMO

P.S. Я рекомендую внимательно ознакомиться с документами React, поскольку они хорошо объяснили концепции

Ответ 2

Если я понимаю, что вы сомневаетесь. Похоже, у вас есть небольшая ошибка. Я загружаю репо и запускаю тест на React 15.4.2

Вызов компонента "Карта":

 <Card 
        onSwipeLeft={console.log("action('swipe left')")} 
        onSwipeRight={console.log("action('swipe right')")}>
        <h2>{item}</h2>
      </Card>

Вызов компонента "Моя карта":

     <Card 
        key={item}
        onSwipeLeft={()=>{console.log("action('swipe left')")}} 
        onSwipeRight={() => {console.log("action('swipe right')")}}>
        <h2>{item}</h2>
      </Card>

Нам нужно создать область действия для обработчика событий, поэтому одним из решений является функция стрелки. Тем не менее, они представляют собой синтаксический сахар вокруг анонимных функций. Функция стрелки не имеет своего собственного контекста и вместо этого будет использовать тот же this, что и контекст, в котором он был определен. Подробнее handle-events-in-react-with-arrow-functions

Также на MyCards вы возвращаете что-то вроде (ваш код)

export default class MyCards extends Component {

constructor(props) {
super(props);

this.state = {

    }
}
render() {
    return Wrapper;
    // return (
    //     <div>
    //         <p>Something</p>
    //         {Wrapper();}
    //     </div>
    // );
}

}

Но вы должны вернуть компонент, и путь возвращается, он должен быть

экспорт по умолчанию класс MyCards extends Component {

constructor(props) {
super(props);

this.state = {        
    }
}
render() {
    return <Wrapper/>      
}

}

Предложение: если вы не собираетесь иметь какое-либо состояние в компоненте MyCards, вы можете сделать его функциональным компонентом

Ответ 3

Текущий верный ответ правилен и замечателен в отношении концепции функционального компонента. Фактически вы создаете компонент высокого порядка.

Однако я чувствую, что ваше репо действительно может быть исправлено, просто сделав это изменение:

render() {
        return Wrapper();
    }

Посмотрите, что я фактически выполнил функцию Wrapper, чтобы получить компонент в результате, иначе вы выполняете функцию, а не компонент.

Вы можете реорганизовать свой код, чтобы на самом деле расширить React.Component, и я на самом деле рекомендую это, поскольку HOC лучше использовать для других целей, например, для декораторов.

См. здесь, единственное, что я изменил, это то, что: https://codesandbox.io/s/xp6pzpyoq