反应内联条件组件属性

我一直在寻找,无法找到我的问题的答案.所以我想要一个仅在某些条件下显示的条件属性,例如:

正如你可以看到我只想指示按钮活跃,如果this.state.view是等于默认.但是,我明白了Unexpected token, error...

但是当我尝试在它之前放置一个属性时,例如:

它传递语法错误并显示正常,但这不是我想要实现的.

我怎样才能解决这个问题？这可能是它没有通过的原因？

UPDATE

所以我发现在react-bootstrap属性中active是一个简写,active=true所以我用它来解决它

所以如果有人遇到这个问题,我就把它留在这里.但是,我仍然想知道为什么条件属性失败而没有将它包含在类似prop的语法中,例如:

这个:

active={this.state.view === 'default'}

与

{this.state.view === 'default' && 'active'}

mrlew.. 18

首先,JSX只是一个语法糖的React.createElement.所以,它可能看起来像,但实际上,你没有说明html attributes:事实上,你总是在路过props.

例如,JSX代码被转换成了React.createElement('input',{type:'button',value:'My Button'}).并且,必要时,React引擎将此React Element 作为HTML元素呈现给DOM.

也就是说,我们有JSX将prop没有值的转换为true(检查文档).例如:被转化为React.createElement(Button, { active: true });.

但是,我们知道,HTML5规范不接受 attribute=true(如指出这里).例如:无效.正确的是.

因此,为了将HTML元素呈现给DOM,React仅考虑props有效attributes(如果不是,则不呈现该属性).检查所有支持的html属性.然后,最后,如果它是一个布尔属性,它会删除true/false值,并正确呈现它.

例如:被转换为React.createElement("button", { active: true });然后React呈现给DOM ,因为标签的activeHTML规范中没有属性(不在支持的属性列表中).

但是

被转换为React.createElement("button", { disabled: true });和React呈现给DOM .

我只是说要澄清你的情况.

你试图将activeprop 传递给Button组件(首字母大写意味着它是一个React组件:Button在你的代码中有一个名为processed的React组件).

这意味着:

被转化为 React.createElement(Button, { active: true });

和

被转化为 React.createElement(Button, { active: true });

同一件事情!

所以,如果你想做一个有条件的prop,你可以简单地做这样的事情:

括号内有条件.意味着,如果this.state.view等于default(true),则activeprop将被传递给具有该true值的组件.如果不相等,则使用该false值.

Button那么,组件必须处理这个active道具.它可以渲染button元素,例如,改变它的风格,通过disabled道具...我创建了一个小提琴来演示这个:https://jsfiddle.net/mrlew/5rsx40gu/

1> mrlew..：

---

首先,JSX只是一个语法糖的React.createElement.所以,它可能看起来像,但实际上,你没有说明html attributes:事实上,你总是在路过props.

例如,JSX代码被转换成了React.createElement('input',{type:'button',value:'My Button'}).并且,必要时,React引擎将此React Element 作为HTML元素呈现给DOM.

也就是说,我们有JSX将prop没有值的转换为true(检查文档).例如:被转化为React.createElement(Button, { active: true });.

但是,我们知道,HTML5规范不接受 attribute=true(如指出这里).例如:无效.正确的是.

因此,为了将HTML元素呈现给DOM,React仅考虑props有效attributes(如果不是,则不呈现该属性).检查所有支持的html属性.然后,最后,如果它是一个布尔属性,它会删除true/false值,并正确呈现它.

例如:被转换为React.createElement("button", { active: true });然后React呈现给DOM ,因为标签的activeHTML规范中没有属性(不在支持的属性列表中).

但是

被转换为React.createElement("button", { disabled: true });和React呈现给DOM .

我只是说要澄清你的情况.

你试图将activeprop 传递给Button组件(首字母大写意味着它是一个React组件:Button在你的代码中有一个名为processed的React组件).

这意味着:

被转化为 React.createElement(Button, { active: true });

和

被转化为 React.createElement(Button, { active: true });

同一件事情!

所以,如果你想做一个有条件的prop,你可以简单地做这样的事情:

括号内有条件.意味着,如果this.state.view等于default(true),则activeprop将被传递给具有该true值的组件.如果不相等,则使用该false值.

Button那么,组件必须处理这个active道具.它可以渲染button元素,例如,改变它的风格,通过disabled道具...我创建了一个小提琴来演示这个:https://jsfiddle.net/mrlew/5rsx40gu/

2> 小智..：

---

实际上，我想这是一个重复的问题，我之前在此链接中回答过。对于此特定的帖子，不需要为布尔值设置条件道具，因为它的工作原理如下：

const { booleanValue } = this.props;
return (
    
);

或设置自己的布尔值：

const booleanValue = someThing === someOtherThing;
return (
    
);

它们都可以正常工作，因为当booleanValueis时false，react看不到activeprop，因此它不存在，除非您将checkedprop 传递到特定组件，该组件将从接收错误的prop this.props。

但是，如果您想在特定组件上带有条件的道具，并且条件返回假，那么您不希望有两种方法，我喜欢第二种方法：

第一：

第二：