Question

我正在尝试为每个组件实例创建一个局部变量，类似于一个小缓存，因为它存储的信息可以切换某些东西，而不需要在状态/商店上。所以我尝试过这样：

设置默认道具以保持我的信息：

debug

设置一个功能来切换这个道具：

getDefaultProps: function getDefaultProps() {
    return {
        showPreviewModal: { value: false,
                            writable: true
                        }
    };
},

通过点击功能触发该功能

 togglePreviewModal: function togglePreviewModal() {
    this.props.showPreviewModal = !this.props.showPreviewModal;
},

我认为这在理论上会起作用，但是onclick正在即时渲染渲染。我搜索了这个问题，似乎最好的结果是将点击功能更改为：

 <button className="btn btn-default btn-blue previewAsset" onClick={() => this.togglePreviewModal() }>

但是这也不起作用，点击功能仍然会立即触发。

Answer 1

你不能直接改变那样的道具 - 因为道具是从父组件明确传递下来的，你需要在源头改变道具。据推测，它起源于层次结构中某个组件的状态。

要做到这一点，你要传递一个函数以及在源头更改它的道具（使用setState()）。这是一个例子：

var ParentComponent = React.createClass({
    togglePreviewModal: function() {
        this.setState({
            showPreviewModal: !this.state.showPreviewModal
        };
    },        

    getInitialState: function() {
        return {
            // Unnecessary but providing for clarity
            showPreviewModal: false
        };
    },

    render: function() {
        // This is for whatever values you were mapping over
        var childComponents = ...map(function() {
            return <ChildComponent togglePreviewModal={this.togglePreviewModal} />;
        });

        if (this.state.showPreviewModal) {
            return (<div>
                <Modal />
                {childComponents}
            </div>);
        } else {
            return (<div>
                {childComponents}
            </div>);
        }
    }
});

var ChildComponent = React.createClass({
    render: function() {
        return <button
            className="btn btn-default btn-blue previewAsset"
            onClick={this.props.togglePreviewModal} />;
    }
});

请注意，我没有在<button>的onClick中调用该函数，只是传入prop（这是一个函数）。

React，Local缓存变量和onclick on render

1 个答案: