Brandon Brandon - 3 months ago 18
React JSX Question

What does `|` do in this object in Flow?

I'm browsing the docs for Facebook's

, and I can't figure out some of this syntax.

I know
|
is a bitwise
OR
operator, and while I'm not 100% on what that does, it doesn't appear to make sense when used with
strings
.

Is this syntax unique to
Flow
in the
React
ES6 class construction?

And while I'm at it: what does
props: Props
accomplish?

class Button extends React.Component {
props: Props;

state: {
display: 'static' | 'hover' | 'active';
};

static defaultProps: { visited: boolean };

onMouseEnter: () => void;
onMouseLeave: () => void;
onMouseDown: () => void;

constructor(props: Props) {
super(props);
this.state = {
display: 'static',
};

const setDisplay = display => this.setState({display});

this.onMouseEnter = () => setDisplay('hover');
this.onMouseLeave = () => setDisplay('static');
this.onMouseDown = () => setDisplay('active');
}

render() {
let className = 'button ' + this.state.display;
if (this.props.visited) {
className += ' visited';
}

return (
<div className={className}
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
onMouseDown={this.onMouseDown}
onClick={this.props.onClick}>
{this.props.title}
</div>
);
}
}

Answer

Looks like a Union in Flow. In the case above, it doesn't appear to be a bitwise or.

Comments