Javascript 基于属性有条件地添加元素

您应该如何有条件地添加下面的元素？如果

with filter

属性为true，我只希望

存在于中

  render: function () {
    if (this.props.withFilter) {
      return (
        <div>
          <div className='next-card next-card__section next-card__section--no-bottom-spacing'>
            <div className='next-field__connected-wrapper'>
              { this.props.children }
            </div>
          </div>
        </div>
      )
    } else {
      return (
        <div>
          <div className='next-card next-card__section next-card__section--no-bottom-spacing'>
            { this.props.children }
          </div>
        </div>
      )
    }
  }

render:function（）{
如果（本道具带过滤器）{
返回(
{this.props.children}
)
}否则{
返回(
{this.props.children}
)
}
}

请记住，JSX元素只是JavaScript对象，您可以将它们分配给变量，并像其他任何元素一样传递它们：

render: function () {
  let inner = this.props.children;

  if (this.props.withFilter) {
    inner = (
      <div className='next-field__connected-wrapper'>
        {inner}
      </div>
    );
  }

  return (
    <div>
      <div className='next-card next-card__section next-card__section--no-bottom-spacing'>
        {inner}
      </div>
    </div>
  );
}

render:function（）{
让内部=this.props.children；
如果（本道具带过滤器）{
内部=(
{内部}
);
}
返回(
{内部}
);
}