1

Допустим есть родительский блок

class Parent extends React.Component {
    render() {
        retrun (
            <div>
                <Child />
                <Logs />
            </div>
       )
   }
}

//Покупка чего-либо
class Child extends React.Component {

    state = {
        ...
    };

    buy = () => {
        //...
        //Logs.latest.push(...) -Как это сделать?
        this.setState(...)
    };

    render() {
        return (
            <div>
                ...
                <button onClick={this.buy}>Купить</button>
            </div>
        )
    }
}

//Вывод логов
class Logs extends React.Component {
    state = {
        latest: [...]
    }

    render(
        <div>
            {this.state.latest.map((log) => {return (<div>{log.text}</div>)})}
        </div>
    )
}

Как можно сделать так, чтобы при клике в Child.buy() после покупки добавлялась запись в Logs и он обновлялся?

Можно конечно хранить state.latest в Parent и обновлять массив уже там. Но может есть решение по-лучше?

2
  • 1
    Есть - redux, mobx и контекст(React.createContext с версии 16.3, хотя он не сильно отличается от предложенного вами варианта).
    – DiDex
    1 сен 2018 в 9:59
  • Еще есть вариант засунуть компонент <Logs/> в компонент <Child/>, я не знаю какая у тебя там логика, но если <Logs/> изменяются только из за <Child/> тогда в этом есть смысл.
    – CoonJS
    3 сен 2018 в 10:27

1 ответ 1

2

если без redux и т.д, то черрез колбэк функцию

class Parent extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            item = "";
        }
    }
    render() {
        const {item} = this.state;
        retrun (
            <div>
                <Child change={(item) => this.setState({item: item})}/>
                <Logs item={item}/>
            </div>
       )
   }
}

class Child extends React.Component {

    state = {
        ...
    };

    buy = () => {
        //...
        //Logs.latest.push(...) -Как это сделать?
        this.setState(...)
        this.props.change(...) - сюда то, что нужно передать
    };

    render() {
        return (
            <div>
                ...
                <button onClick={this.buy}>Купить</button>
            </div>
        )
    }
}

//Вывод логов
class Logs extends React.Component {
    state = {
        latest: [...]
    }

    render(
        <div>
            {this.state.latest.map((log) => {return (<div>{log.text}</div>)})}
        </div>
    )
}
1
  • Писать вызов функции в разметке метода рендеринга считается признаком плохого тона в реакте. Использование стрелочной функции в рендере создает новую функцию каждый раз, когда компонент отображается, что может иметь последствия для производительности. Будет полезно почитать вот это: Arrow Function in Render 4 сен 2018 в 8:11

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.