react：内联有条件地将props传递给组件

IT技术 javascript reactjs inline
2021-04-14 16:17:50

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

例如，现在我有：

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-statement 类型的东西：

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

总结：我试图找到一种方法来为 定义propsChild，但传递一个值（或做其他事情），这样Child仍然可以从Child自己的getDefaultProps().

6个回答

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

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}
    />;
  }
});
我知道这个答案已经很老了，所以我不知道在此期间情况是否发生了变化，但是对于在 2021 年偶然发现这个答案的任何人来说：undefined作为道具传递与根本不设置道具是不同的。在组件内，检查Object.keys(props)将显示已设置的属性 - 甚至设置为 的值undefined。这对于某些组件来说很重要，这些组件根据设置的 props 既可用作受控组件，又可用作非受控组件。
2021-05-26 16:17:50
在false它不为我工作，我想要的方式的情况下-我仍然得到一个键值对：property：null。是否仍然可以使用单个 JSX 元素以某种方式做到这一点？
2021-06-01 16:17:50
哦，真棒！您是否在某处的文档中找到了它？我一直在寻找，但在快速搜索中找不到任何东西
2021-06-03 16:17:50
null没有像undefinedBTW这样的力量武装起来。
2021-06-03 16:17:50
有用的技巧！希望有关于如何有效使用条件渲染技术的好资源
2021-06-09 16:17:50

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

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

应该管用。

这不会产生与 editable= {this.props.editable 相同的结果吗？this.props.editableOpts : undefined} 还是有区别？
2021-05-31 16:17:50
@garyee：不同之处在于某些组件可能会错误地将其 undefined视为覆盖（例如null，它始终是覆盖），因此保留默认值而不是将其设置为虚假值的唯一方法是明确不传递它，而不是通过undefined.
2021-06-01 16:17:50
@sktguha：确实，我认为看起来像是打字错误：我们不能传播 undefined 所以是的，最后应该是 a {}。我会推荐一个版本，谢谢:)
2021-06-19 16:17:50
@YannDìnendal 如果我使用空对象而不是未定义对象会怎样，例如 <Child {...(this.props.editable ? {editable: {this.props.editableOpts}} : {)} > 有什么区别吗？哪一个更好？
2021-06-21 16:17:50

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

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

我喜欢这个解决方案。我会childProps用来避免混淆
2021-06-21 16:17:50

实际上，如果您的props是布尔值，则不需要实现条件，但如果您想通过内联条件添加props，您应该像下面这样写：

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

希望它不会让你感到困惑。的{...手段是传播经营者喜欢通过存在的props：{...props}和editable &&手段，如果editable是true的{ editable: editableOpts }对象将与{...我们将一个新的对象喜欢它：{...{ editable: editableOpts }}它意味着editable={editableOpts}，但如果this.porps.editable是真实的。

嘿，我可能会迟到，但我想分享一个小技巧。万一你在这里是因为你想动态传递props。然后你可以使用 * 符号将所有东西作为别名导入，即在这种情况下作为 grs 导入将在一个对象中，然后你可以使用该对象动态传递props。希望这会帮助你们中的一些人。

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>

其它你可能感兴趣的问题
上一篇如何使用 JSX 和 Loadsh 重复元素 n 次 下一篇将 React 应用程序转换为 React Native 的最快方法是什么？