小编Eva*_*nss的帖子

我有一个名为ListContainer的父组件，其中包含一个名为ListItem的子组件。我需要为名为nameArray的数组中的每个项目调用ListItem，并需要从此数组中的值填充ListItem的名称。

export const ListItem = (props) => {
  return <h2>Name: { props.name }</h2>;
};

export const ListContainer = (props) => {
  const nameArray = [
    {
      name: "john",
      age: "29"
    },
    {
      name: "james",
      age: "21"
    }
  ];
  return (
      <div>
      { this.nameArray.map(function(item) {
          return (
            <ListItem name={ item.name } />
          )
      }) }
      </div>
    );
};

通过查看文档，我认为我需要使用map函数，但是我对其在JSX中的工作方式感到困惑。

https://facebook.github.io/react/docs/lists-and-keys.html

我有一个元素数组：

const itemCurrent = document.createElement('div');
const itemNext = document.createElement('div');

我创建了一个数组：

const itemsAll = [itemCurrent, itemNext];

如何将它们全部插入到我的页面正文中？

我正在尝试使用react-big-calendar 包。http://intljusticemission.github.io/react-big-calendar/examples/index.html

我的日历显示在页面上。分页正常工作，我的控制台中没有错误。但是我的事件都没有显示。我在某处有语法/格式错误吗？

import React from 'react';
import BigCalendar from 'react-big-calendar';
import moment from 'moment';

BigCalendar.momentLocalizer(moment); // or globalizeLocalizer


const Calendar = props => {
  const dummyEvents = [
    {
      allDay: false,
      end: new Date('December 10, 2017 11:13:00'),
      start: new Date('December 09, 2017 11:13:00'),
      title: 'hi',
    },
    {
      allDay: true,
      end: new Date('December 09, 2017 11:13:00'),
      start: new Date('December 09, 2017 11:13:00'),
      title: 'All Day Event',
    },
  ];
  return (
     <div>
         <BigCalendar
          events={dummyEvents}
          startAccessor="startDate"
          endAccessor="endDate"
        />
     </div>
  )
}

我的 React 组件有一个名为的 prop propWhichIsArray，它将是一个对象数组。这些对象将有一个id，which 是一个 ID，textwhich 是一个字符串。你怎么能用 TypeScript 输入这个？

type Props = {
  propWhichIsArray: {
    id,
    text: string;  
  }[]
};

const Component: React.FC<[Props]> = ({ propWhichIsArray }) => {
  //

我收到一个错误：

属性 'propWhichIsArray' 不存在于类型 '[Props] & { children?: ReactNode; }'。TS2339

我需要一个使用 Redux 状态的自定义钩子。如果你将状态从 React 组件传递给函数，它看起来像这样：

自定义挂钩：

function useMyCustomHook(state) {
  const { message } = state;

  const handleClick = () => {
    if(environment_variable) {
      // do something with message
    } else {
      // do something else with message 
    }
  }

  return handleClick;
}

我的组件：

const MyComponent = ({ state }) => {
  return <button onClick={()=> useMyCustomHook(state) }>Go</button>
}

每次都必须从 React 组件传递 Redux 的状态，这有点痛苦。是否可以直接在自定义钩子中访问状态？

我需要使用属性和值 CSS 选择器来定位生成并将更改的类。这工作正常：

[class^="class1"] {
  background: gold
}

<p class="class1-gdsgdfgsgd">Hi</p>

然而实际上，我需要定位的课程并不是最先出现的。class1-ANYTHING在这种情况下有没有办法瞄准？

<p class="classA-fuiiiid classB-djfksdjf <!-- Maybe other classes here --> class1-dfgsfggfd">Hi</p>

我正在使用 GraphQL Codegen 从我的 GraphQL 模式生成 TypeScript 类型。这是我的查询，我使用了一个片段，因此它只有易于导出的类型：

query reservationsPage($schoolSettingId: Int!, $day: UnixDate!) {
  roomsForSchoolSettingAll(schoolSettingId: $schoolSettingId) {
    ...reservationsPage
  }
}

fragment reservationsPage on Room {
    id
    name
    children {
      id
      name
      registrationToday(day: $day) {
        id
        checkIn
        checkOut
        importantInformation
        plannedCheckOut
        absent
        pickUpBy {
          id
          name
        }
      }
    }
}

返回的数据如下所示：

const res = [
  {
    id: 1,
    __typename: "Room",
    name: 'Name 1',
    children: []
  },
  {
    id: 2,
    __typename: "Room",
    name: 'Name 2',
    children: [
      {
        id: 3,
        __typename: "ChildProfile",
        name: …

你可以有一个数组作为useMemo钩子的依赖吗？

我知道这会很好：

const dep1 : string = '1'

const thing = useMemo(()=>{
  // stuff
},[dep1])

但是这个呢？：

const dep2 : string[] = ['1', '2']

const thing2 = useMemo(()=>{
  // stuff
},[dep2])

我以为我读过一次，对象和数组将始终为相等检查返回 false，实际上意味着thing2永远不会被记住。但是我在文档中看不到这一点：

https://reactjs.org/docs/hooks-reference.html#usememo

这是一个人为的例子，dep1并且dep2是常量变量，但想象它们是一个值会改变的道具。

根据 W3Schools 的说法：

classList 属性是只读的

https://www.w3schools.com/jsref/prop_element_classlist.asp

但是，这很好用：

document.querySelector('body').classList = 'body-class';

现场示例：

document.querySelector('body').classList = 'body-class';

document.querySelector('body').classList = 'body-class';

.body-class {
    color: blue;
}

这种用法是一种黑客行为吗？

我一直断言 API 调用的结果在 TypeScript 中具有以下形式：

interface Res {
  films: string;
  people: string;
}

const res: Res = await fetch("https://swapi.dev/api/")
  .then((res) => {
    return res.json();
  })
  .then(({ films, people }) => {
    return {
      films,
      people,
    };
  });

后来我用 Zod 添加了运行时类型检查

const resSchema = z.object({
  films: z.string(),
  people: z.string(),
});

resSchema.parse(res);

这是可行的，但这意味着我需要维护两种不同的类型定义。有没有办法在 TypeScript 中检查 的类型resSchema是否等于Res？

我知道 zod 可以推断：

    type ResType = z.infer<typeof resSchema>

    const res: ResType = await fetch("https://swapi.dev/api/")
      .then((res) => {
        return res.json();
      })
      .then(({ films, …