使用高阶组件有条件地渲染列表

Question

我的应用程序有一个功能切换功能，它告诉我的 UI 是否应该呈现 UI 的一部分。我想创建一个高阶组件来有条件地渲染这些类型的组件。在一种情况下，我试图有条件地呈现列表，但我运行遇到此错误：

ConditionalRender(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

这是有道理的，因为我只是想渲染这个组件的 children。到目前为止，这是我得到的：

https://jsfiddle.net/fmpeyton/cykmyabL/

var settings = { showHello: true, showGoodbye: false};

function ConditionalRender (props) {
    var output = null;

  if(props.shouldRender) output = props.children;

  console.log(output);
  // return (<li>{output}</li>); // This works, but isn't desired html structure
  return ({output});
}

function App (props) {
    return (
    <ul>
        <ConditionalRender shouldRender={props.settings.showHello}>
        <li>Hello!</li>
      </ConditionalRender>
      <ConditionalRender shouldRender={props.settings.showGoodbye}>
          <li>Goodbye...</li>
        </ConditionalRender>
    </ul>
  );
}

ReactDOM.render(
  <App settings={settings} />,
  document.getElementById('container')
);

如果可以的话，我只想渲染 children 而无需任何额外的 logic.This HOC 也可以处理更复杂的 children 。像这样：

<ConditionalRender shouldRender={props.settings.showHello}>
<div>
<p> blah blah blah</p>
<table>
<!-- ... -->
</table>
</div>
</ConditionalRender>

有什么想法吗？

Answer 1

试试这个：

function App(props) {
  return (
    <ul>        
      {props.settings.showHello && <li>Hello!</li>}
      {props.settings.showGoodbye && <li>Goodbye...</li>}
    </ul>
  );
}

P.S. 由于这一行，您的代码不起作用：

return ({output});

假设你有 es2015 支持，它将被视为 object property shorthand。所以它是一样的：

return {output: output};

这不是 React 期望从 render 方法中得到的。

你可以试试这个：

function ConditionalRender(props) {
  if (props.shouldRender) {
    // Make sure we have only a single child
    return React.Children.only(props.children);
  } else {
    return null;
  }
}

但这不是最简单的方法。查看更多 here.

P.P.S. 你的ConditionalRender组件不是所谓的Higher-Order组件。根据 docs，HOC 是一个 函数，它接受一个组件和 returns 一个新组件。

使用高阶组件有条件地渲染列表

Conditionally render list with Higher Order Component

jsx

reactjs

react-jsx