这在常规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没有帮助,但有人有什么想法吗?
我不需要你给我填鸭式的灌输,也不需要你帮我解决问题,我只需要一个例子,说明有人在做这样的事情。
1条答案
按热度按时间uwopmtnx1#
不太确定你想有条件地呈现什么,但这里有两个例子。在第一个例子中,我们根据props给予src,在第二个例子中,如果用户已经登录,我们有条件地返回avatar。