reactjs 如何根据源页面有条件地渲染功能组件?

h7appiyu  于 2023-05-06  发布在  React
关注(0)|答案(1)|浏览(115)

这在常规JS中很容易做到,作为对DOM的参数更新,但我不知道如何在React中做到这一点。
工作流程如下:

  • 用户从第1页访问表A
  • 表A填充有冰淇淋甜筒数据
  • table上的每个冰淇淋甜筒都有一个链接
  • 单击该链接时,它会将您带到一个包含不同表(表B)的新页面

挑战是这样的:

  • 表B是填充有冰淇淋甜筒数据和混合菜单的功能组件
  • 我在第2页有一个新的标签,叫做“特殊标签”
  • 特殊选项卡将您带到表A
  • table上的每个冰淇淋甜筒仍然有一个链接
    但是点击链接后,应该会进入B桌*,不带混音菜单**

通常在JavaScript中,你会这样做:

renderTableB( isAccessedFromSpecialTab) {

  if(isAccessedFromSpecialTab){
   //render without mix menu
  } else {
   //render with mix menu
  }
}

因为它是React,所以似乎你将变量传递到函数组件的方式是通过props。然而,props似乎是静态的,不做任何有条件的事情:

function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

有办法做到这一点吗?是否应该与国家合作?我试过了
1.复制整个功能组件并单击特殊选项卡中的链接即可获得新组件。然而,这个解决方案很糟糕,因为它有大量的代码重复
1.查看React Docs on State,但State的示例假设组件的呈现方式取决于用户输入,而不是从哪个页面访问。
1.查看了关于props的React Docs,但所有示例都没有任何基于props的条件渲染。
1.查看了props / state的条件渲染上的堆栈溢出,但没有一个基于原始页面工作。
我通常觉得Stack Overflow没有帮助,但有人有什么想法吗?
我不需要你给我填鸭式的灌输,也不需要你帮我解决问题,我只需要一个例子,说明有人在做这样的事情。

uwopmtnx

uwopmtnx1#

不太确定你想有条件地呈现什么,但这里有两个例子。在第一个例子中,我们根据props给予src,在第二个例子中,如果用户已经登录,我们有条件地返回avatar。

function Avatar(props) {
  const src = props.conditionA ? props.user.avatarUrl : placeholder
  const alt = props.conditionA ? props.user.name : ""
  return (
    <img className="Avatar"
      src={src}
      alt={alt}
    />
  );
}
function Avatar(props) {

  if(!props.loggedIn) {
    return null
  }

  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

相关问题