Question

我正在尝试使用一个视频播放器（可以显示任意数量的不同视频）在这个灯箱中接受组件和图像：

他们的文档提供了一个简单的示例（粘贴在下面），忽略了一个重要的细节：灯箱中的组件可能需要在显示时更改其内容的一部分。所以我需要了解如何将属性传递给用于灯箱的mainSrc属性的组件。

我是React的新手，所以我想学习正确的方法来管理它。我能找到的唯一可用的语法是，在父语句中：

constructor(props) {
  super(props);
  this.state = {
    myVidPlayer: '',
  }
}
...
handleLightboxOpen() {
  this.setState({
    // re-create new video player every time:
    myVidPlayer: React.createElement(VidPlayer, { vidSrc: **real video source here** }),
  });
}

在父级灯箱的渲染中，我只需要<Lightbox mainSrc={this.state.myVidPlayer}...>根据需要工作，但每次灯箱弹出时我都会重新创建子组件，这似乎是错误的。

我试着这样做：

constructor(props) {
  super(props);
  this.state = {
    myVidSrc: '',
  }
  this.vidPlayer = React.createElement(VidPlayer, { vidSrc: this.state.myVidSrc });
}
...
handleLightboxOpen() {
  this.setState({
    // does not work, child does not get updated:
    myVidSrc: '**real video source here**',
  });
}

在父项的灯箱渲染中，<Lightbox mainSrc={this.vidPlayer}...>但子组件“vidSrc”prop在父状态变量更改时永远不会更新。我一直认为这应该会消失，但在这种情况下，道具似乎保持其初始值。

他们的示例代码如下（我用上面的“vidPlayer”代替“VideoIframe”）：

import React, { Component } from 'react';
import Lightbox from 'lightbox-react';
import VideoIframe from 'components/cat-video';

const images = [
    VideoIframe,
    '//placekitten.com/1500/500',
    '//placekitten.com/4000/3000',
    '//placekitten.com/800/1200',
    '//placekitten.com/1500/1500'
];

export default class LightboxExample extends Component {
    constructor(props) {
        super(props);

        this.state = {
            photoIndex: 0,
            isOpen: false
        };
    }

    render() {
        const {
            photoIndex,
            isOpen,
        } = this.state;

        return (
            <div>
                <button
                    type="button"
                    onClick={() => this.setState({ isOpen: true })}
                >
                    Open Lightbox
                </button>

                {isOpen &&
                    <Lightbox
                        mainSrc={images[photoIndex]}
                        nextSrc={images[(photoIndex + 1) % images.length]}
                        prevSrc={images[(photoIndex + images.length - 1) % images.length]}

                        onCloseRequest={() => this.setState({ isOpen: false })}
                        onMovePrevRequest={() => this.setState({
                            photoIndex: (photoIndex + images.length - 1) % images.length,
                        })}
                        onMoveNextRequest={() => this.setState({
                            photoIndex: (photoIndex + 1) % images.length,
                        })}
                    />
                }
            </div>
        );
    }
}

Answer 1

感谢您提供更新。

将道具从父级传递到子组件是反应的一个基本方面，对于理解非常重要。一个简单的例子可能是这样的;

Child = React.createClass({
    render() {
        return <div>{this.props.someProp}</div>;
    }
});

Parent = React.createClass({
    render() {
        return <Child someProp={"an example value"}/>;
    }
});

挂载{{1}}现在会导致Parent呈现给显示。

如何动态更新子组件属性

1 个答案: