Question

大家好，我目前很好奇如何根据屏幕的宽度传递不同的道具。

这是我要修改的功能：

export const Community: React.FC<ComponentProps> = ({
  communityTeam,
  summary,
}) => (
  <div>
    <Container debug={false}>
      <Grid>
        <Cell full={true}>
          <h2 className="mll-community__title ray-text--monospace ray-text--body">
            Community Team
          </h2>
        </Cell>
        // If screen size is greater than 800px in width run this with Cell span passed down as 3.
        {communityTeam.map((member) => (
          <Cell span={3}>
            <div className="ray-card">
              <div className="ray-card__content">
                <div className="mll-community__avatar">
                  <Avatar image={member.imageUrl} />
                </div>
                <div className="mll-community__name">
                  <p className="ray-text">{member.name}</p>
                </div>
                <div className="mll-community__dashed-line" />
                <div className="mll-community__position">
                  <p className="ray-text">{member.position}</p>
                </div>
              </div>
            </div>
          </Cell>
        ))}
        // Otherwise pass down Cell span as 2 if it is less than 800 px.
        {communityTeam.map((member) => (
          <Cell span={3}>
            <div className="ray-card">
              <div className="ray-card__content">
                <div className="mll-community__avatar">
                  <Avatar image={member.imageUrl} />
                </div>
                <div className="mll-community__name">
                  <p className="ray-text">{member.name}</p>
                </div>
                <div className="mll-community__dashed-line" />
                <div className="mll-community__position">
                  <p className="ray-text">{member.position}</p>
                </div>
              </div>
            </div>
          </Cell>
        ))}
        <Cell full={true}>
          <p className="ray-text mll-community__summary">{summary}</p>
        </Cell>
      </Grid>
    </Container>
  </div>
);

我不确定这是否是涉及媒体查询的问题，但是我想像这样做一些事情：

// If screen size is greater than 800px in width run this with Cell span passed down as 3.
        {communityTeam.map((member) => (
          <Cell span={3}>
            <div className="ray-card">
              <div className="ray-card__content">
                <div className="mll-community__avatar">
                  <Avatar image={member.imageUrl} />
                </div>
                <div className="mll-community__name">
                  <p className="ray-text">{member.name}</p>
                </div>
                <div className="mll-community__dashed-line" />
                <div className="mll-community__position">
                  <p className="ray-text">{member.position}</p>
                </div>
              </div>
            </div>
          </Cell>
        ))}
        // Otherwise pass down Cell span as 2 if the width of the screen is less than 800 px.
        {communityTeam.map((member) => (
          <Cell span={2}>
            <div className="ray-card">
              <div className="ray-card__content">
                <div className="mll-community__avatar">
                  <Avatar image={member.imageUrl} />
                </div>
                <div className="mll-community__name">
                  <p className="ray-text">{member.name}</p>
                </div>
                <div className="mll-community__dashed-line" />
                <div className="mll-community__position">
                  <p className="ray-text">{member.position}</p>
                </div>
              </div>
            </div>
          </Cell>
        ))}

有什么方法可以根据屏幕的尺寸传递道具吗？

Answer 1

您可以将Ram<0x2000> work_ram; // 4 KB total of work RAM? (no, 4 KB per bank)事件监听器添加到组件中。因此，即使用户调整其大小，您也可以获得筛子的宽度</ p>

resize

然后在constructor(props) { super(props); this.state = { width: 0, height: 0 }; this.updateWindowDimensions = this.updateWindowDimensions.bind(this); } componentDidMount() { this.updateWindowDimensions(); window.addEventListener('resize', this.updateWindowDimensions); } componentWillUnmount() { window.removeEventListener('resize', this.updateWindowDimensions); } updateWindowDimensions() { this.setState({ width: window.innerWidth, height: window.innerHeight }); }中，您可以选中render以传递特定的width。

props

如何根据特定屏幕尺寸传递特定道具

1 个答案: