反应: 内联有条件地将支柱传递给组件

我想知道是否有比使用 if 语句更好的方法来有条件地传递支持。

例如，现在我有:

var parent = React.createClass({
propTypes: {
editable: React.PropTypes.bool.isRequired,
editableOpts: React.PropTypes.shape({...})
},
render: function() {
if(this.props.editable) {
return (
<Child editable={this.props.editableOpts} />
);
} else {
// In this case, Child will use the editableOpts from its own getDefaultProps()
return (
<Child />
);
}
}
});

有没有不使用 if 语句的方法来写这个代码？我正在考虑类似于 JSX 中的 inline-if 语句的东西:

var parent = React.createClass({
propTypes: {
editable: React.PropTypes.bool.isRequired,
editableOpts: React.PropTypes.shape({...})
},
render: function() {
return (
<Child
{this.props.editable ? editable={this.props.editableOpts} : null}
/>
);
}
});

总结 : 我试图找到一种方法来为 Child定义一个道具，但是传递一个值(或者做一些其他的事情) ，使得 Child仍然从 Child自己的 getDefaultProps()中获取道具的值。

122026 次浏览
小开
最佳答案

你很接近你的想法。事实证明，传递一个道具的 undefined与根本不包含它是一样的，它仍然会触发默认道具值。所以你可以这样做:

var parent = React.createClass({
propTypes: {
editable: React.PropTypes.bool.isRequired,
editableOpts: React.PropTypes.shape({...})
},
render: function() {
return <Child
editable={this.props.editable ?
this.props.editableOpts :
undefined}
/>;
}
});
小开

定义 props变量:

let props = {};
if (this.props.editable){
props.editable = this.props.editable;
}

然后在 JSX 中使用它:

<Child {...props} />

下面是代码中的一个解决方案:

var parent = React.createClass({
propTypes: {
editable: React.PropTypes.bool.isRequired,
editableOpts: React.PropTypes.shape({...})
},
render: function() {
let props = {};
if (this.props.editable){
props.editable = this.props.editable;
}
return (
<Child {...props} />
);
}
});

来源，反应文档: https://facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes

小开

在 this.props.editable中添加一个扩展运算符:

<Child {...(this.props.editable ? {editable: this.props.editableOpts} : {})} >

应该可以。

小开

实际上，如果你的道具是布尔型的，那么不需要实现条件，但是如果你想通过内联条件来添加道具，你应该这样写:

const { editable, editableOpts } = this.props;
return (
<Child {...(editable && { editable: editableOpts } )} />
);

希望这不会让你困惑。{...意味着它是一个扩展操作符，就像传递已存在的道具一样: {...props}和 editable &&意味着如果 editable是 true，那么 { editable: editableOpts }对象将生成和 {...一样的新对象: {...{ editable: editableOpts }}意味着 editable={editableOpts}，但如果 this.porps.editable是真的。

小开 
var parent = React.createClass({
propTypes: {
editable: React.PropTypes.bool.isRequired,
editableOpts: React.PropTypes.shape({...})
},
render: function() {
return (
<Child
{...(this.props.editable && {editable=this.props.editableOpts})}
/>
);
}
});

这通过道具，如果他们被定义。否则道具不能通过。在另一个答案的道具仍然通过，但值是 undefined，这仍然意味着道具正在通过。

小开

你也可以试试这个简单的方法

 <Child {...(this.props.editable  && { editable: this.props.editableOpts })} />
小开

嘿，我可能要迟到了，但我想分享一个小小的提示。 如果你来这里是因为你想动态传递道具。然后您可以使用 * sign 作为别名导入所有内容，即在本例中作为 grs 导入，然后导入将在一个对象中，然后您可以使用该对象动态传递道具。 希望这对你们有所帮助。

import * as grs from "../components/Theme";
import React from "react";
const GridInput = ({ sp, ...props }) => {
return (
<Grid {...grs[`gr${sp}`]}>
<Input {...props} />
</Grid>
);
};
export default GridInput;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

小开

这可能对你有帮助，我经常用这个方法

    <Component
otherProps
{...(yourCondition ? {
deleteIcon: <DeleteIcon id={`${id}_icon`} />,
}
: {})}
/>

另一种方法

<Component
{...(yourCondition &&
{ prop: propValue })}
/>

提交答案