如何将无价值的道具传递给组件 [英] How to pass props without value to component

问题描述

如何将没有价值的道具传递给反应组件?

 < SomeComponent disableHeight>{/* 这里 */}{({width})=>(<另一个组件autoHeight {/*和此处*/}宽度= {宽度}高度= {300}{... otherProps}/>)}</SomeComponent> 

注意-没有为这些道具指定默认道具值.

我似乎找不到任何引用，但是通过观察这些属性的值，默认情况下它们被分配为 true .

解决方案

编译器将您传递的内容解释为布尔属性.编写纯HTML时也是如此.没有值的属性将被解释为布尔值 true .由于JSX是用于编写HTML的语法糖，因此具有相同的行为是有道理的.

官方反应文档具有以下:

布尔属性

使用带有属性的HTML表单元素时，通常会出现这种情况如禁用，必需，选中和只读.省略属性的值会使JSX将其视为true.至如果为false，则必须使用属性表达式.

//这两个在JSX中与等效相同，用于禁用按钮

 <输入类型=按钮"已禁用/> ;;< input type ="button" disabled = {true}/> ;; 

//这两个在JSX中是等效，用于不禁用按钮

 < input type ="button"/> ;;< input type ="button" disabled = {false}/> ;; 

---

示例

JSX:

 < div><组件autoHeight/>< AnotherComponent autoHeight = {null}/></div> 

JS:

  React.createElement("div"，空值，React.createElement(Component，{autoHeight:true})，React.createElement(AnotherComponent，{autoHeight:null})); 

检查其babel演示， null 或什至 undefined 的值.

所以您可以这样做:

 < SomeComponent disableHeight = {null}>{({width})=>(<另一个组件autoHeight = {null}宽度= {宽度}高度= {300}{... otherProps}/>)}</SomeComponent> 

尽管我会指出，将其作为 undefined 传递可能是完全不必要的，因为从 AnotherComponent 中读取 this.props.autoHeight 总是会给您 undefined ，无论您是否明确将其传递为 autoHeight = {undefined} .在这种情况下，传递 null 可能更好，因为您通过声明道具的值为...无值"(即 null )来显式传递道具./p>

How does one pass a prop without value to a react component?

<SomeComponent disableHeight> {/* here */}
    {({width}) => (
        <AnotherComponent
            autoHeight {/* and here */}
            width={width}
            height={300}
            {...otherProps}
        />
    )}
</SomeComponent>

Note - there is no default prop values specified for those props.

I can't seem to find any references on that, but by observing values for those properties they get assigned to true by default.

解决方案

What you are passing is interpreted by the compiler as a boolean attribute. This is also true for when writing pure HTML; attributes without values are interpreted as a boolean true. Since JSX is a syntactic-sugar for writing HTML, it makes sense that it has the same behavior.

The official React documentation has the following:

Boolean Attributes

This often comes up when using HTML form elements, with attributes like disabled, required, checked and readOnly. Omitting the value of an attribute causes JSX to treat it as true. To pass false an attribute expression must be used.

// These two are equivalent in JSX for disabling a button

<input type="button" disabled />;
<input type="button" disabled={true} />;

// And these two are equivalent in JSX for not disabling a button

<input type="button" />;
<input type="button" disabled={false} />;

---

Example

JSX:

<div>
  <Component autoHeight />
  <AnotherComponent autoHeight={null} />
</div>

JS:

React.createElement(
  "div",
  null,
  React.createElement(Component, { autoHeight: true }),
  React.createElement(AnotherComponent, { autoHeight: null })
);

Check the babel demo of this, here.

---

Solution

As ctrlplusb stated, if you want to pass an "empty prop" you can simply give it the value of null or even undefined.

So you could do:

<SomeComponent disableHeight={null}>
    {({width}) => (
        <AnotherComponent
            autoHeight={null}
            width={width}
            height={300}
            {...otherProps}
        />
    )}
</SomeComponent>

Though I will note that passing it as undefined is probably entirely unnecessary because reading this.props.autoHeight from AnotherComponent will always give you undefined, regardless if you explicitly passed it as autoHeight={undefined} or not at all. Passing null is probably better in such cases since you are explicitly passing the prop by stating that it has the value of... "no value" (i.e null).

这篇关于如何将无价值的道具传递给组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！