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

发布于08月27日

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

例如，现在我有:

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中的一种内联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} 
      />
    );
  }
});

To wrap-up:我试图找到一种方法来定义Child的props ，但传递一个值(或做其他事情)，这样Child仍然会从Child自己的getDefaultProps()中提取props 的值.

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

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

推荐答案

Reactjs相关问答推荐

有关列表元素上缺少唯一键的react 错误：如何获取有关问题所在位置的更多信息？

MUImaterial -ui-如何将文本字段和 Select 分组？

React onKeyUp不一致地使用快速Shift+键按压

安装后未渲染tailwind

将cy.get()与动态类名一起使用？

Redux Provider Stuck甚至彻底遵循了文档

以下代码是否存在安全问题？

有没有一种方法可以在没有强烈动画的情况下有条件地渲染组件？

在构建或部署Reaction应用程序时出错

.populate() 方法在 mongodb 中不起作用

单击按钮不会切换组件(当按钮和组件位于两个单独的文件中时)

从 redux 调用UPDATE_DATA操作时状态变得未定义

React + Redux：数据未正确传递给具有动态路由的组件

MUI TextField Select 菜单的最大高度

如何使用 React 更改 Material UI 中 ButtonGroup 的 colored颜色？

如何在 React map 函数循环中使用
标签

使用 React Router v6 监听来自不同组件的组件状态变化

React Native map 中的初始zoom 级别

Storybook - 无法解析generated-stories-entry.cjs/字段browser不包含有效的别名配置

如何防止 mui x-date-picker 被截断？