Блог

Главная - Вопросы по программированию - Изменение состояния класса react между элементами DOM

Изменение состояния класса react между элементами DOM

#reactjs #class #dom #state #element

#reactjs #класс #dom #состояние #элемент

Вопрос:

У меня есть 2 элемента react DOM navbar и content-box. При нажатии на элемент в панели навигации я бы хотел, чтобы он изменил состояние компонента класса содержимого, таким образом, отображая другое содержимое.

 class Content extends Component {
constructor(props) {
    super(props);
    this.state = {
        content: "news"
    }
}}

class Navbar extends Component{

render() {
    <button onClick={change state of Content element to "sport"} />
}}

Кроме того, если в DOM есть несколько элементов, которые я хотел бы вызывать независимо, правильно ли это?

В index.js:

 ReactDOM.render(
    <React.StrictMode>
        <Navbar />
    </React.StrictMode>,
    document.getElementById('navbar')
);

ReactDOM.render(
    <React.StrictMode>
        <Content />
    </React.StrictMode>,
    document.getElementById('content')
);

затем они находятся в index.html звонили в разные места.

Комментарии:

1. Должен был упомянуть, что я новичок в React, поэтому я не совсем уверен в структуре элементов DOM и их размещении на странице. Если я ошибся, пожалуйста, какие-нибудь ресурсы, где структура суммируется в одном месте?

2. Вам не следует и не нужно использовать несколько render s подобным образом. Визуализируйте только одну вещь в своем приложении, затем создайте свою логику приложения с помощью компонентов. То, что вы хотите, это передать состояние дочернему компоненту. Вы можете использовать родительский компонент, сохранить там свое состояние и передать его дочернему. Но, если панель навигации и другие компоненты не будут родительскими и дочерними, вам следует использовать либо контекст, либо глобальный менеджер состояний. Создайте свой проект с помощью Create React App и не играйте index.js . Просто создайте другие компоненты и используйте их в своем App.js .

3. Кстати, как ученик, старайтесь держаться подальше от сложной структуры состояний, следовательно, контекста и глобального менеджера состояний. Они вам сейчас не нужны. Вы должны ознакомиться с официальной документацией. Кроме того, я предлагаю начать с API hooks.

4. @devserkan Спасибо за ваш ответ. Я реструктурировал проект, и он работает так, как я ожидал. Спасибо