Как отрендерить контент при клике?

146
31 декабря 2021, 09:00
import React, {Component} from 'react';
class Header extends Component {
    render() {
        return (
            <div>
                {this.props.items.map((item, index) =>
                    <li key={index} onClick={() => this.props.items.push(item.id)}>{item.id}</li>
                )}
                <span onClick={() => console.log(this.props.items)}>test</span>
            </div>
        );
    }
}
export default Header;

Я вывожу массив с помощью map. При двойном клике на элемент, я хочу, чтобы он добавился в массив и отренденился снизу списка. Добавить в массив могу, а отрендерить - нет.

import React, {Component} from 'react';
import Header from './Header';
const menu = [
    {
        link: 'link1',
        id: 'Articles'
    },
    {
        link: 'link2',
        id: 'Contacts'
    },
    {
        link: 'link3',
        id: 'Posts'
    },
    {
        link: 'link1',
        id: 'Lorem'
    },
    {
        link: 'link2',
        id: 'Ipsum'
    },
    {
        link: 'link3',
        id: 'Test'
    }
];
class App extends Component {
    render() {
        return (
            <div>
                <Header items={menu}/>
            </div>
        );
    }
}
export default App;
Answer 1

Вы хотя бы документацию почитайте, что ли, перед тем как браться за реакт

import React, {Component} from 'react'; 
import Header from './Header'; 
 
class Header extends Component { 
    render() { 
        return ( 
            <div> 
                {this.props.items.map((item, index) => 
                    <li key={index} onClick={() => this.props.addToArray(item.id)}>{item.id}</li> 
                )} 
                <span onClick={() => console.log(this.props.items)}>test</span> 
            </div> 
        ); 
    } 
} 
 
class App extends Component { 
    state = { 
      menu: [ 
    { 
        link: 'link1', 
        id: 'Articles' 
    }, 
    { 
        link: 'link2', 
        id: 'Contacts' 
    }, 
    { 
        link: 'link3', 
        id: 'Posts' 
    }, 
    { 
        link: 'link1', 
        id: 'Lorem' 
    }, 
    { 
        link: 'link2', 
        id: 'Ipsum' 
    }, 
    { 
        link: 'link3', 
        id: 'Test' 
    } 
]} 
 
    addToArray = (id) => { 
      this.setState(state => { 
        return { 
          menu: [...state.menu, {id, link: 'link'}] 
        } 
      }) 
    } 
 
    render() { 
        return ( 
            <div> 
                <Header items={this.state.menu} addToArray={this.addToArray}/> 
            </div> 
        ); 
    } 
} 
 
export default App;

READ ALSO
JavaScript. Проверка правильных ответов в тесте

JavaScript. Проверка правильных ответов в тесте

В общем идея такая, имеются имеются radiobutton'ы нужно нажать выбрать ответы во всех вопросах, по нажатию на кнопку должно проверяться правильные...

279
Каким образом можно добавить объекты классов из пакета javafx.geometry?

Каким образом можно добавить объекты классов из пакета javafx.geometry?

Как их визуализировать и возможно ли это вообще? Например Point2D, он ведь не расширяет Node, следовательно его нельзя поместить ни в один из контейнеров

162
Множественный рендеринг моделей Libgdx

Множественный рендеринг моделей Libgdx

кто может подсказать, хочу отрисовать одну модель, в разных местах на карте, прочитал, что можно сделать один меш, и через вершинный шейдер...

112