We are following feross/Standard.
For shorthand, use p for props.
styled.div`
{p => p.theme.someStyleString}
`All ref should be a call back and bind it to instance directly. So, it can be accessed without calling refs.
If the element is wrapped by styled components, it is needed to use innerRef.
Also, expressions of the callbacks should be like c => (this.someName = c) to prevent the error of eslint. c stands for component
import { MarkdownEditor } from 'components'
const Root = styled.div`
...
`
render () {
return (
<Root
innerRef={c => (this.root = c)}
>
<MarkdownEditor
ref={c => (this.editor = c)}
value={this.state.content}
onChange={this.handleContentChange}
/>
</Root>
)
}It should be placed inside of a constructor.
class SomeComponent {
someHandler = e => {
e.preventDefault()
...
}
}Wrong cases
class SomeAnotherComponent {
constructor (props) {
super(props)
// This is wrong JUST FOR NOW because React Hot Loader doesn't support.
this.someHandler = e => {
e.preventDefault()
...
}
}
someAnotherHandler () {
e.preventDefault()
...
}
render () {
return <button
onClick={this.someAnotherHandler.bind(this)}
onContextMenu={e => this.someAnotherHandler}
/>
}
}If you tried to use ref for styled component, you will get a instance of the component not the element object.
To access the root element of it, you have to access children array.
The library give another option innerRef. We use this instead of accessing children.
const CustomButton = styled.button`
font-size: 24px;
`
class WrappedButton {
someMethod () {
this.button.focus()
}
render () {
return <CustomButton
innerRef={c => (this.button = c)}
/>
}
}