我想将{
type: 'div',
className: 'top',
children: [
[<Ticker name="1" />, <Ticker name="2" />],
null || DummyElement
]
}
和class App extends React.Component {
constructor(props) {
super(props);
this.state = { layout: 1 };
}
render() {
return this._renderLayout();
}
_renderLayout() {
const { layout } = this.state;
return (
<div>
<div className="top">
{[<Ticker key="1" name="1" />, <Ticker key="2" name="2" />]}
{layout === 2 && <DummyElement key="3" />}
</div>
<div className="bottom">{this._renderButtons()}</div>
</div>
);
}
_renderButtons() {
return (
<React.Fragment>
<button onClick={() => this.setState({ layout: 1 })}>2x Ticker</button>
<button onClick={() => this.setState({ layout: 2 })}>
2x Ticker + DummyElement
</button>
</React.Fragment>
);
}
}
class Ticker extends React.Component {
// Display seconds from the moment I'm created.
constructor(props) {
super(props);
this.state = { tickNumber: 0 };
}
componentDidMount() {
console.log(`Mount Ticker "${this.props.name}"`);
this.timerID = setInterval(() => {
this.setState(prevState => ({ tickNumber: prevState.tickNumber + 1 }));
}, 1000);
}
componentWillUnmount() {
console.log(`Unmount Ticker "${this.props.name}"`);
clearInterval(this.timerID);
}
render() {
const displayTick = String(this.state.tickNumber).padStart(4, 0);
const displayStr = `Ticker "${this.props.name}" - ${displayTick}`;
return <div className="Ticker">{displayStr}</div>;
}
}
function DummyElement() {
return <div className="DummyElement">Dummy element</div>;
}
ReactDOM.render(<App />, document.querySelector("#root"));分开并将它们放在.top,
.bottom {
margin: 1em;
}
.Ticker,
.DummyElement {
display: inline-block;
margin-right: 1em;
border: 1px solid black;
}下面的同一行
HTML：
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>页面：https://adsler.co.uk/events/
尝试过的CSS find an event无效
这在移动设备上有效，但是如何在台式机上复制？
post an event
答案 0 :(得分：0)
.event_wrapper {
text-align: center;
margin-top: 20px;
}<div class="lasvegas" style="text-align: center">
Events
</div>
<div class="event_wrapper">
<div>
<a href="https://adsler.co.uk/find-an- event/"><span id="findanevent" class="event">Find an Event</span></a>
</div>
<div>
<a href="https://adsler.co.uk/post-an-event/"><span id="postanevent" class="event">Post an Event</span></a>
</div>
</div>