Question

我想知道是否有一种更好的方法来有条件地传递道具而不是使用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定义道具，但是传递一个值（或做其他事情），使得{{ 1}}仍然从Child自己的Child中提取该道具的价值。

Answer 1

你的想法很接近。事实证明，为支柱传递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}
    />;
  }
});

Answer 2

定义let props = {}; if (this.props.editable){ props.editable = this.props.editable; }变量：

<Child {...props} />

然后在JSX中使用它：

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} />
    );
  }
});

以下是代码中的解决方案：

{{1}}

来源，反应文档：this page

Answer 3

向this.props.editable中添加一个扩展运算符：

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

应该可以。

Answer 4

实际上，如果您的prop是布尔值，则不需要执行条件，但是如果您想通过内联条件添加prop，则应如下所示：

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

希望它不会使您感到困惑。 {...表示它是传播算子，就像传递现有的props：{...props}和editable &&表示如果editable是true，则{ editable: editableOpts }对象将使并使用{...创建一个新的对象，例如：{...{ editable: editableOpts }}表示editable={editableOpts}，但如果this.porps.editable为真。

Answer 5

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}
      />
    );
  }
});

有条件地我们可以传递这样的道具

Answer 6

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，仍然表示道具正在传递。

Answer 7

您也可以尝试这种简便方法

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

Answer 8

嘿，我可能会迟到，但我想分享一个小技巧。万一你在这里是因为你想动态传递道具。然后您可以使用 * 符号将所有内容作为别名导入，即在这种情况下作为 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>

React：内联有条件地将prop传递给组件

8 个答案: