react 显示隐藏组件的方法_在React.js中隐藏组件的正确方法

Say you are passing a prop called show to a component. If the prop value is true, you should render the full component normally. If it is false, you should not display anything.

You can do this two ways.

return null in the render method of the component.

apply a CSS class containing display: none attribute to the component's DOM element.

Which ones is the correct or the preferred way?

解决方案

For the most part, your two solutions are interchangeable. They both "work" fine.

I would warn against preemptive optimization in choosing which of these methods to choose. If you do need to eventually modify your code and try the other method, this is an absurdly simple swap to make and shouldn't be an obstacle. So don't worry about it until there's a reason to worry about it.