У меня есть компонент без сохранения состояния, использующий библиотеку перекомпоновки. Файл является контейнером:
import { connect } from 'react-redux';
import {
compose,
withState,
withHandlers,
} from 'recompose';
import PropTypes from 'prop-types';
import ColumnPresentation from './ColumnPresentation';
import { setPlayerStep, setWinner } from '../GameState';
export default compose(
connect(
state => ({
playerStep: state.game.playerStep,
winner: state.game.winner,
}),
dispatch => ({
setPlayerStep: () => dispatch(setPlayerStep()),
setWinner: winner => dispatch(setWinner(winner)),
}),
),
withState('count', 'setCount', 0),
withHandlers({
incrementCount: props => () => {
props.setCount(props.count + 1);
},
}),
)(ColumnPresentation);
Этот файл представляет собой представление
import React from 'react';
import Cell from '../../../components/Cell';
function columnPresentation({
arrayFiller,
incrementCount,
}) {
return (
<div>
<div
onClick={incrementCount}
style={{ flexDirection: 'column', display: 'inline-block' }}
role="button"
tabIndex={0}
>
<p>Hello</p>
</div>
</div>
);
}
export default columnPresentation;
import React from 'react';
import ColumnPresentation from '../column/ColumnPresentationContainer';
function homePresentation() {
return (
<div style={styles.container}>
<ColumnPresentation />
<ColumnPresentation />
</div>
);
}
const styles = {
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
};
export default homePresentation;
Как умножить один компонент без состояния, чтобы каждый компонент списка имел независимое состояние?У меня, когда я нажимаю на один из компонентов, состояние изменяется во втором.Как клонировать этот компонент, чтобы клоны имели независимое состояние