Html 如何根据特定屏幕大小传递特定道具

嘿，伙计们，我现在很好奇如何根据屏幕的宽度传递不同的道具

以下是我试图修改的函数：

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>
);

export const Community:React.FC=({
社区小组，
总结，
}) => (
社区团队
//如果屏幕尺寸的宽度大于800px，则运行此程序，单元格跨度向下传递为3。
{communityTeam.map（（成员）=>(
{member.name}
{member.position}
))}
//否则，如果单元格跨度小于800 px，则将其向下传递为2。
{communityTeam.map（（成员）=>(
{member.name}
{member.position}
))}
{summary}
);

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

// 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>
        ))}

//如果屏幕大小的宽度大于800px，则运行此命令，单元格跨度向下传递为3。
{communityTeam.map（（成员）=>(
{member.name}
{member.position}
))}
//否则，如果屏幕宽度小于800 px，则将单元格跨度向下传递为2。
{communityTeam.map（（成员）=>(
{member.name}
{member.position}
))}

---

根据屏幕大小，是否有任何方法传递道具？

您可以将

调整大小

事件侦听器添加到组件中。因此，即使用户调整其大小，您也可以获得尖叫声的宽度

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

来传递特定的

道具

// If screen size is greater than 800px in width run this with Cell span passed down as 3.
        {width >= 800 ? 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>))
        : 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>
        ))}

//如果屏幕大小的宽度大于800px，则运行此命令，单元格跨度向下传递为3。
{宽度>=800？社区团队.map（（成员）=>(
{member.name}
{member.position}
))
：communityTeam.map（（成员）=>(
{member.name}
{member.position}
))}
这需要将渲染代码放入类中，对吗？