在react 中引入js_在React JS中发现真理的本质

在react 中引入js

Today I wrote a simple tabbed show and hide feature in React.JS. There are components for previews, and then a component showing more details of the item that is active.

今天，我在React.JS中编写了一个简单的选项卡式显示和隐藏功能。 有用于预览的组件，然后是用于显示活动项目的更多详细信息的组件。

It starts off with nothing active, so the state is initially set as null.

它开始时没有任何活动，因此状态最初设置为null 。

const [activeItem, setActiveItem] = useState(null);const handleClick = (itemIndex) => {
    setActiveItem(itemIndex);
  };

A handleClick event is passed through to the preview components so that they can set themselves as the active item.

handleClick事件将传递到预览组件，以便它们可以将自己设置为活动项目。

<ItemHeader
  data={ item }
  index={ index }
  onClick={ handleClick }
  active={ index === activeItem }
/>

When the preview is clicked, it sets itself as the active item, using the index and handler that have been passed in from the parent.

单击预览时，它使用从父级传入的索引和处理程序将自身设置为活动项。

<div onClick={ () => props.onClick(props.index) }>

If one of the items is active, a FullItem component is rendered.

如果其中一项处于活动状态，则会呈现FullItem组件。

{
  activeItem && (
    <FullItem data={ props.items[activeItem] } />
  )
}

I got this far and thought: great. I am a genius and a professional with many skills. But I had forgotten something.

我想到了这一点：太棒了。 我是一个天才，而且拥有很多技能。 但是我忘记了一些东西。

You see, I more frequently program with Ruby, where I would always expect the index of an array to be truthy:

您会发现，我更经常使用Ruby编程，在此我总是希望数组的索引是真实的：

➜  ~ irb
irb(main):001:0> 0 && "a"
=> "a"
irb(main):002:0> nil && "a"
=> nil

But this is Javascript:

但这是Javascript：

➜  ~ node
Welcome to Node.js v12.18.0.
Type ".help" for more information.
> 0 && "a"
0
> null && "a"
null

So it needs to be more specific.

因此，它需要更具体。

{
  (activeItem !== null) && (
    <FullItem data={ props.items[activeItem] } />
  )
}

What catches you out when switching between programming languages?

在编程语言之间切换时，有什么吸引您？

翻译自: https://medium.com/@merxplat/discovering-the-nature-of-truth-in-react-js-34b194ff6fb4

在react 中引入js