react 渲染道具

You could say this topic has been done to death, but lately I’ve started using a technique that I don't recall having come across elsewhere. While it's not  particularly clever, it is concise.  So please forgive one more post on the topic...

你可以说这个话题已经做了 到 死亡 ，但最近我使用的技术，我不记得有碰到过其他地方开始。 尽管它不是特别聪明，但它很简洁。 因此，请原谅该主题的另一篇文章...

冗长的方式 (Props the verbose way)

“Don't be afraid! We won't make an author of you, while there's an honest trade to be learnt, or brick-making to turn to.”

“不要害怕！ 我们将不会成为您的作者，而这是一个值得学习的诚实交易，或者是要砖造的东西。”

I’ll base my examples on a React application that uses jsheatmap, a package I wrote for generating heat map data. The presentation of the heat map is done via a <table>, where each cell’s background color is set to an RGB value that jsheatmap generates from a given set of input values.

我将基于使用jsheatmap的React应用程序创建示例， jsheatmap是我编写的用于生成热图数据的软件包。 热图的显示通过<table> ，其中每个单元格的背景色设置为jsheatmap从一组给定的输入值生成的RGB 值 。

const HeatMapTable = () => {const [players, setPlayers] = useState(2);const [suited, setSuited] = useState(false)const [ties, setTies] = useState(false)const [data, setData] = useState(getNewData(players, suited, ties))

There is a PlayersRow component that contains controls to allow the user to set the number of players needed to determine certain poker odds. It needs not only the initial value, but a setter to set new values. These properties (props) are players and setPlayers.

有一个PlayersRow组件，其中包含一些控件，允许用户设置确定某些扑克赔率所需的玩家数。 它不仅需要初始值，还需要设置器来设置新值。 这些属性(道具)的players和setPlayers 。

One could use the time-honored technique of passing these props as explicit attributes when including the component in its container (HeatMapTable).

当将组件包含在其容器(HeatMapTable)中时，可以使用将这些道具作为显式属性传递的古老技术。

<Players players={players} setPlayers={setPlayers} />

Pretty basic stuff.

很基本的东西。

支撑简洁方式 (Props the concise way)

"Please, sir, I want some more."

“请，先生，我想要更多。”

In this case (as often happens), the variables used to hold the prop values often have the same names as the attribute names of the React components. This allows a more concise syntax to pass the props down to the child.

在这种情况下(经常发生)，用于保存属性值的变量通常与React组件的属性名称具有相同的名称。 这允许更简洁的语法将道具传递给孩子。

In the example just shown, there are two props; you might have many more. One technique is to use an intermediate object to hold the props that are needed by the child component, then use the spread operator to “expand” the prop object into attribute values.

在刚刚显示的示例中，有两个道具。 您可能还有更多。 一种技术是使用中间对象来保存子组件所需的道具，然后使用传播运算符将道具对象“扩展”为属性值。

const props = {players, setPlayers, anotherProp, yetAnotherProp, etc};
<Players {...props} />

Which is equivalent to the much more verbose:

这相当于更为冗长：

<Players players={players} setPlayers={setPlayers} anotherProp={anotherProp} yetAnotherProp={yetAnotherProp} etc={etc} />

支撑简洁方式 (Props the conciser way)

“Alas! How few of Nature's faces are left alone to gladden us with their beauty!"

“唉！ 剩下多少只大自然的面Kong让我们为它们的美丽而高兴！”

It turns out that the intermediate variable is not really needed, because you can just do this:

事实证明，实际上不需要中间变量，因为您可以这样做：

<Players {...{players, setPlayers, anotherProp, yetAnotherProp, etc}} />

Or even something that mixes intermediate objects with the spread operator:

甚至将中间对象与散布运算符混合在一起的东西：

const props = {anotherProp, yetAnotherProp, etc};
<Players {...{players, setPlayers, ...props}} />

As I said, not all that clever, it's just using the spread operator to spread an object declared inside the the JavaScript denoted by the outer {}.

就像我说的那样，并不是很聪明，它只是使用split运算符来传播在用外部{}表示JavaScript内部声明的对象。

So that's all there is! A little trick I find myself using ever more frequently.

这就是全部！ 我发现自己经常使用一个小技巧。

翻译自: https://www.freecodecamp.org/news/yet-another-post-about-react-props/

react 渲染道具