Итак, скажем, у меня есть 2 экземпляра компонента, и у меня есть несколько кнопок, которые берут свои данные с сервера.
Но дело в том, что эти экземпляры могут использовать один и тот же объект, у меня может быть такой код:
<button id = {object.id}>Button in component instance 1</button>
<button id = {object.id}>Button in component instance 2</button>
Итак, теперь возникает мое второе недоразумение: как я могу изменить и модифицировать эти кнопки в React, как React может получить элемент и сделать что-то вроде getAttribute ?
У меня может быть функция <button onClick = {deleteButton(1)}>Delete Button 1</button>
и дело в том, что я не уверен, должен ли я получить элемент по идентификатору или каким-то другим способом.
Ниже я загрузил картинку с описанием того, что меня смущает.
🤔 А знаете ли вы, что...
JavaScript имеет множество библиотек и фреймворков, таких как jQuery, Angular, и Vue.js.
В каждом компоненте создайте состояние (отдельное для каждого экземпляра), которое указывает, должна ли отображаться кнопка или нет. Например, если компоненту передается количество кнопок для рендеринга, вы можете сделать что-то вроде:
const ButtonList = ({ numButtons }) => {
const [buttonState, setButtonState] = React.useState(() => (
new Array(numButtons).fill(true)
));
const hide = (changeIndex) => {
setButtonState(buttonState.map(
(orig, i) => i === changeIndex ? false : orig
));
};
return (
buttonState.map((show, i) => !show ? null : (
<div>
<button>Button {i}</button>
<button onClick = {() => hide(i)}>Delete Button {i}</button>
</div>
))
);
};
const App = () => (
<div>
<ButtonList numButtons = {1} />
<ButtonList numButtons = {3} />
</div>
);
ReactDOM.render(<App />, document.querySelector('.react'));<script crossorigin src = "https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src = "https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class = "react"></div>