小编Chi*_*Zen的帖子

我是React的新手,我正试图找出<MyComponent> </ MyComponent> vs <MyComponent />的目的/用途.除了自动关闭标签,我似乎无法找到任何信息.

我使用自动关闭的<MyComponent />和后续道具创建了一个基本的选项卡滚动器作为JSFiddle,我想知道是否有更好的方式来编写React而不是我所做的.

class TabScroller extends React.Component {

  render() {
    return (
      <div className="tabScroller">
        <div className="NavList">
          <TabNav handleClick={this.handleNavClick} />
          <TabList 
            tabs={this.state.tabs} 
            activeTab={this.state.activeTab}
            scrollPosition={this.state.scrollPosition} 
            handleClick={this.handleTabClick}
          />
        </div>
        <TabContent content={this.state.tabs[this.state.activeTab].content} />
      </div>
    );
  }
}

// ========================================

ReactDOM.render(
  <TabScroller />,
  document.getElementById('root')
);

研究没有结果,所以希望我能在这里找到答案.所有这些都是在安装了react-beautiful-dnd的最新node.js和create-react-app上完成的.请参阅代码下方的图片,了解应该发生什么和应该发生什么的示例.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

// fake data generator
const getItems = (count) => Array.from({length: count}, (v, k) => k).map(k => ({
  id: `item-${k}`,
  content: `item ${k}`
}));

// a little function to help us with reordering the result
const reorder =  (list, startIndex, endIndex) => {
  const result = Array.from(list);
  const [removed] = result.splice(startIndex, 1);
  result.splice(endIndex, 0, removed);

  return result;
};

// using some …

我遇到了一些React DND的示例，其中一个是以下代码：

export type Author = {|
  id: string,
  name: string,
  avatarUrl: string,
  url: string,
|}

有几种这样的导出类型，{|...|}在对象括号中带有双管道，尽管进行了研究，但找不到能解释其作用的内容。我认为这是由于有多个Authors组合到最终对象中（例如以下代码），并且双管道防止了某些冲突。

const princess: Author = {
  id: '4',
  name: 'Princess bubblegum',
  url: '',
  avatarUrl: '',
};

export const authors: Author[] = [
  jake, BMO, finn, princess,
];