Question

我需要能够隐藏被包裹的组件，因为它超出了最大宽度。

<div style={{width:100}}>
    <div style={{width:50}}>
        component1
    </div>
    <div style={{width:50}}>
        component2
    </div>
    <div style={{width:50}}>
        component3
    </div>
</div>

//But I actually use map to render children
<div style={{width:100}}>
    {components.map((item, index) => {
        return <div style={{width:50}}>component{index + 1}</div>)
    }}
</div>

如上面的代码所示，父级div的值为100。因此，最后一个组件（component3）将比父级的宽度超出50px，并将在第二行中呈现。但是，我希望离开第一行的任何组件都不会被渲染。如何确保只有component1和component2显示和排除component3？

Answer 1

您可以将所有组件的宽度加到一个单独的变量中，并在已渲染的组件的总宽度超过100之后为其余的所有组件渲染null。

示例

class App extends React.Component {
  state = {
    components: [{ width: 50 }, { width: 50 }, { width: 50 }]
  };
  
  render() {
    const { components } = this.state;
    let totalWidth = 0;

    return (
      <div style={{ width: 100 }}>
        {components.map((item, index) => {
          totalWidth += item.width;

          if (totalWidth > 100) {
            return null;
          }
          return (
            <div key={index} style={{ width: 50 }}>
              component{index + 1}
            </div>
          );
        })}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

如何在React中隐藏包装的组件

1 个答案: