0

我创建了一个Container类和一个InnerElement类。Container包裹InnerElements 的地方。有必要InnerElement在给定时间只显示一个。

当我更改为另一个InnerElement. 有趣的是，当我创建console.log它时，它会显示更改的元素，但不会呈现。有人可以给我一个提示，提前谢谢！

Container班级：

import React from 'react';

export default class Container extends React.Component {

    constructor(props) {
        super(props);

        this.changeElement = this.changeElement.bind(this);

        this.state = {
            currentElement: 0,
        }
    }

    changeElement() {
        const nextElement = this.state.currentElement + 1;
        this.setState({currentElement: nextElement});
    }

    render() {
        const element = this.props.children[this.state.currentElement];
        // In the console log the next (correct) element is shown
        console.log(element);

        return (
            <div>
                {element}
                <button onClick={this.changeElement}>next element</button>
            </div>
        );
    }
}

这里的InnerElement类：

import React from 'react';
export default class InnerElement extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            name: props.name ? props.name : "test"
        }
    }

    render() {
        return (
            <div>
                {this.state.name}
            </div>
        );
    }
}

这里是我Container的InnerElement电话：

<Container>
    <InnerElement name="A" />
    <InnerElement name="B" />
    <InnerElement name="C" />
    <InnerElement name="D" />
</Container>

我还发现，当我在InnerElement this.props.name而不是状态下使用时，它可以工作。

4

1 回答 1

1

React 无法确定您的孩子正在随您的变化而变化，setState因为您正在动态修改孩子。为了帮助 React 做到这一点，你可以给你的 InnerElement 添加一个键：

<Container>
  <InnerElement key="A" name="A" />
  <InnerElement key="B" name="B" />
  <InnerElement key="C" name="C" />
  <InnerElement key="D" name="D" />
</Container>
于 2019-01-06T17:07:03.543 回答