在 React 类组件内部渲染常量
Posted
技术标签:
【中文标题】在 React 类组件内部渲染常量【英文标题】:Rendering a Constant Inside of a React Class Component 【发布时间】:2021-05-28 14:32:43 【问题描述】:我有一个关于在 React 类组件中使用常量呈现内容的方式的快速问题。所以下面的代码可以正常工作(使用 map 函数渲染一个常量):
class App extends React.Component
array = [
name: "Sarah",
age: 27
,
name: "Sam",
age: 35
]
render()
const output = this.array.map(elem => (
<div>
<p>elem.name</p>
<p>elem.age</p>
</div>
));
return (
<div>output</div>
);
但是,以下会产生一个空白页面(我只是定义一个返回 div 并尝试呈现它的常量):
class App extends React.Component
render()
const Output = () => (
<div>Hello</div>
);
return (
<div>Output</div>
);
但如果我使用角括号而不是花括号,则几乎相同的代码可以工作:
class App extends React.Component
render()
const Output = () => (
<div>Hello</div>
)
return (
<div>
<Output />
</div>
)
所以看起来这与大括号和尖括号有关。花括号在我使用 map 函数时起作用,但当我在渲染方法中定义一个返回 div 的常量并尝试直接渲染它时不起作用。然后当我使用尖括号时它再次起作用......这有点奇怪。我知道这远非最重要的事情,我只是想弄清楚这一点。提前谢谢!
【问题讨论】:
【参考方案1】:尖括号用于渲染组件。由于您已将 Output
定义为返回一些 JSX 的函数,因此就 React 而言,这使其成为函数组件(或者更确切地说是 Babel,它处理 JSX 的转换)。
您可以使用大括号,但您应该将 Output
更改为 React 节点。以下是你的做法:
class App extends React.Component
render()
const Output = <div>Hello</div>
return (
<div>Output</div>
);
查看THIS 答案以了解有关 React 节点、元素等之间差异的一些说明。
【讨论】:
谢谢。因此,在我的示例中,使用 map 进行渲染的原因是 map 返回一个数组或对象,它不是组件或函数,因此可以用花括号进行渲染,这是否正确? 好吧,map
总是会返回一个新数组。从来没有一个对象。当然,数组可以包含任何东西,包括 React 组件(函数或对象)。使用大括号还是尖括号的问题取决于您是渲染节点还是组件。另外值得一提的是,由于output
是一个常量,您最好避免在渲染方法中定义它,因为您每次(重新)渲染组件时都重新定义它。【参考方案2】:
class App extends React.Component
render()
const Output = () => (
<div>Hello</div>
);
return (
<div>Output()</div>
);
如果您尝试调用函数 Output(),它将返回 JSX,但请遵循 article 他们不建议这样做
【讨论】:
以上是关于在 React 类组件内部渲染常量的主要内容,如果未能解决你的问题,请参考以下文章