我想知道在 React 应用程序中实现布局的最佳方法是什么。

基础知识

假设我们想要在简单的网格中布置 4 个组件。最基本的方法是这样的。

<svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
  <A color="red" x={0} y={0} width={width/2} height={height/2} />
  <B color="blue" x={width/2} y={0} width={width/2} height={height/2} />
  <B color="green" x={0} y={height/2} width={width/2} height={height/2} />
  <A color="yellow" x={width/2} y={height/2} width={width/2} height={height/2} />
</svg>

http://codepen.io/anon/pen/OWOXvV?editors=0010

它会很好地工作，但是键入明确的大小值很容易出错并且对开发人员不友好。如果我们可以改用百分比值 (0 - 1) 会怎么样？

简单容器

const Container = ({x, y, width, height, children}) => {
  return (
    <g transform={`translate(${x}, ${y})`}>
      {React.Children.map(children, (child) => React.cloneElement(child, { // this creates a copy
        x: child.props.x * width,
        y: child.props.y * height,
        width: child.props.width * width,
        height: child.props.height * height
      }))}
    </g>
  );
};

 <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
  <Container width={width} height={height}>{/* one root container is given real pixel size */}
    <Container width={1/2}>{/* it's children recursively use 0-1 coordinates */}
      <A color="red" height={1/2} />
      <B color="green" y={1/2} height={1/2} />
    </Container>
    <Container x={1/2} width={1/2}>
      <B color="blue" height={1/2} />
      <A color="yellow" y={1/2} height={1/2} />
    </Container>
  </Container>
</svg>

http://codepen.io/anon/pen/PWEmVd?editors=0010

在这种情况下，我们将允许容器组件将其子组件的相对值映射到实际像素值。它更易于使用。

布局容器

另一个步骤是创建布局容器，f.e. HContainer 简单地水平放置其子项。

const HContainer = ({ x, y, width, height, children }) => {
  const c = React.Children.toArray(children);
  const ratio = width / c.reduce((sum, child) => (sum + child.props.width), 0);
  return (
    <g transform={`translate(${x}, ${y})`}>
      {c.reduce((result, child) => {
        const width = child.props.width * ratio;
        result.children.push(React.cloneElement(child, { // this creates a copy
          x: result.x,
          y: 0,
          width,
          height
        }));
        result.x += width;
        return result;
      }, { x: 0, children: [] }).children}
    </g>
  );
};

<svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
  <HContainer width={width} height={height}>{/* one root container is given real pixel size */}
    <Container width={1/4}>{/* it's children recursively use 0-1 coordinates */}
      <A color="red" height={1/2} />
      <B color="green" y={1/2} height={1/2} />
    </Container>
    <VContainer width={3/4}>
      <B color="blue" />
      <A color="yellow" />
      <HContainer height={1/2}>
        <B color="pink" />
        <A color="violet" width={3} />
        <B color="#333" />
      </HContainer>
    </VContainer>
  </HContainer>
</svg>

http://codepen.io/anon/pen/pRpwBe?editors=0010

响应式组件

假设我们希望在宽度或高度低于某个值时删除某些组件。您可能会像这样使用条件渲染。

const MinWidth = ({ children, width, minWidth, ... others }) => {
  return minWidth > width ? null : <Container width={width} {... others }>{ children }</Container>;
};

<svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
  <HContainer width={width} height={height}>{/* one root container is given real pixel size */}
    <Container width={1/4}>{/* it's children recursively use 0-1 coordinates */}
      <A color="red" height={1/2} />
      <B color="green" y={1/2} height={1/2} />
    </Container>
    <VContainer width={3/4}>
      <B color="blue" />
      <MinHeight height={1} minHeight={80}>
        <A color="yellow" />
      </MinHeight>
      <HContainer height={1/2}>
        <B color="pink" />
        <A color="violet" width={3} />
        <MinWidth width={1} minWidth={60}>
          <B color="#333" />
        </MinWidth>
      </HContainer>
    </VContainer>
  </HContainer>
</svg>

http://codepen.io/anon/pen/dNJZGd?editors=0010

但这会在过去被跳过的组件所在的地方留下空白。布局容器应该能够扩展呈现的组件以填充可用空间。

响应式布局

这是棘手的部分。我看不出有其他方法可以查看组件是否会呈现，而是实例化和呈现它(及其子组件)。然后，如果我在可用空间内放置 3 个子组件并发现不应渲染第 4 个，我将不得不重新渲染前 3 个。感觉就像打破了 React 流程。

有没有人有什么想法？

最佳答案

在内联样式中使用 flexbox。从代码的外观来看，您已经在使用内联样式。 Here is some help

关于javascript - 在没有 CSS 的情况下 react 响应式布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41961900/