React设置具有特定className的元素的min-height属性

我有一个React组件，其中componentDidMount()' I want to set the最小高度为property of an element where className =“content-wrapper”为“600px”。React设置具有特定className的元素的min-height属性

我曾尝试以下：

componentDidMount() { 
    document.getElementsByClassName('content-wrapper').style.minHeight = "600px" 
}

不幸的结果在下面的错误：

Uncaught TypeError: Cannot set property 'minHeight' of undefined

at MyComponent.componentDidMount

我仍然得到阵营的窍门，并希望得到任何帮助可能实现这一目标。谢谢！

来源

2016-12-25 Barry Michael Doyle

content-wrapper是你在一个反应组件中创建的元素还是仅仅使用标准的html或js？ –

这只是一个'div'标签 –

好吧，如果你在反应组件中创建了这个'div'标签，那么它将是一个虚拟的'div'。在这种情况下，接受的答案不是你想要的，因为你直接修改了不好的DOM。如果它是一个正常的html文件中的div或使用普通的JS创建的，那么它就没有问题。 –

您还未发布如何创建content-wrapper。

如果你做了这样的事情：

class Component extends React.Component { 
    render() { 
     return <div className="content-wrapper"/> 
    } 
}

然后修改DOM直接违背阵营（尽管它可能工作），因为阵营使用虚拟DOM，看看发生了什么变化自去年呈现。因此，如果您直接修改DOM，则React将覆盖这些更改，因为它正在查看以前的虚拟DOM并认为没有任何更改。

相反，你会想：

class Component extends React.Component { 
    componentDidMount() { 
     this.setState({conentWrapperMinHeight: "600px"}) 
    } 
    render() { 
     return <div className="content-wrapper" style={{minHeight: this.state.conentWrapperMinHeight}} /> 
} 
}

你可以只硬编码在600px的，如果你只是做了1个格或你可以动态地在CSS类添加到内容的包装，并设置到了minHeight 600px的。

如果您有多个内容包装div，您想要在多个组件中进行更改，那么您需要lift the state up作为更高的组件，并将其作为道具传递，或者如果它们完全不相关，则使用Redux或Flux。

来源

2016-12-25 22:02:28

我只有一个内容包装'div'，所以很好，但谢谢。如果你说的是真的，这是更好的做法，那么我感谢你的回答和努力。 –

@BarryMichaelDoyle即使它只是一个div，如果它是一个**虚拟** div，那么你想硬编码的值像'style = {{minHeight：“600px”}}'而不是通过DOM –

是的，这也有帮助有很多我的后续问题.. –

获取元素，迭代和设置样式。

componentDidMount() { 
    document.querySelectorAll('.content-wrapper').forEach(el => el.style.minHeight = '600px'); 
}

来源

2016-12-25 21:23:02 Andreyco

完美的作品！谢谢:) –

React设置具有特定className的元素的min-height属性

回答

相关问题