<Wrapper itemHeight="300px">height: ${p => p.itemHeight}; будет height: ${p => p.itemHeight || '200px'};, например. Или можно переписать компонент так:export const Wrapper = styled.article(({
itemWidth,
itemHeight = '200px',
}) => ({
backgroundColor: '#efefef',
margin: '5px',
height: itemHeight,
width: itemWidth,
}));const ItemComponent = props => (
<div>
<p>{props.title}</p>
</div>
);
...
<Carousel
items={items}
ItemComponent={ItemComponent}
/>nextHandler = () => {
const items = [...this.state.items];
items.push(items.shift());
this.setState({ items });
}
prevHandler = () => {
const items = [...this.state.items];
items.unshift(items.pop());
this.setState({ items });
}<button onClick={this.rotate} data-step={-1}>prev</button>
<button onClick={this.rotate} data-step={+1}>next</button>
<button onClick={this.rotate} data-step={-2}>double prev</button>
<button onClick={this.rotate} data-step={+3}>triple next</button>rotate = ({ target: { dataset: { step } } }) => {
this.setState(({ items }) => {
step %= items.length;
return {
items: [
...items.slice(step),
...items.slice(0, step),
],
};
});
}this.setState(state => Object
.keys(state)
.reduce((acc, n) => (acc[n] = n === 'свойствоКотороеДолжноБытьTrue', acc), {})
);this.setState({ input: this.state.output.toString() }); this.showAnswer();
Think of setState() as a request rather than an immediate command to update the component. For better perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately.this.setState({
input: this.state.output.toString()
}, this.showAnswer);бибилиотека react-yandex-maps не имеет такой функциональности
return { actionList };<Range steps={[ 500, 1000, 5000, 10000 ]} />class Range extends React.Component {
state = {
value: this.props.steps[0],
}
onChange = ({ target: { value } }) => {
this.setState({
value: this.props.steps.reduce((closest, n) =>
Math.abs(closest - value) < Math.abs(n - value) ? closest : n
),
});
}
render() {
const { steps } = this.props;
return (
<div>
<input
type="range"
min={steps[0]}
max={steps[steps.length - 1]}
value={this.state.value}
onChange={this.onChange}
/>
<p>{this.state.value}</p>
</div>
);
}
}text={<a href="https://toster.ru">toster</a>}
class App extends React.Component {
state = {
maxCount: 55,
people: [],
url: 'https://swapi.dev/api/people/',
}
fetchPeople() {
fetch(this.state.url).then(r => r.json()).then(r => {
this.setState(({ people, maxCount }) => ({
people: [ ...people, ...r.results ].slice(0, maxCount),
url: r.next,
}));
});
}
updateGenderCount() {
this.setState(({ people }) => ({
genderCount: people.reduce((acc, n) => {
acc[n.gender] = (acc[n.gender] || 0) + 1;
return acc;
}, {}),
}));
}
componentDidMount() {
this.fetchPeople();
}
componentDidUpdate(prevProps, prevState) {
const count = this.state.people.length;
if (count !== prevState.people.length) {
this.updateGenderCount();
if (this.state.url && count < this.state.maxCount) {
this.fetchPeople();
}
}
}
render() {
return (
<div>
<pre>{JSON.stringify(this.state.genderCount, null, 2)}</pre>
</div>
);
}
}