时间戳

首页 > 解决方案 > 如何渲染存储在属性下的组件

javascript - 如何渲染存储在属性下的组件

问题描述

我正在尝试显示一个作为属性存储在另一个类中的类。

这是主要的上层阶级：

可更新号码.jsx

import React, { Component } from 'react';
import SimpleNumber from "./simple_number.jsx"
import SimpleNumberUpdater from "./simple_number_updater.jsx"

export default class UpdatableNumber extends Component {
    constructor(props) {
        super(props);
        this.state = {
            number_value: this.props.value
        };

        this.number = <SimpleNumber value={this.state.number_value}/>;
        this.updater = <SimpleNumberUpdater target={this.number}/>;
        console.log(this.number);
        console.log(this.updater);

        this.render = this.render.bind(this);
    }

    render () {
        // note that if I do `this.number` instead of `this.updater`, it works
        return (
            <div>
                <div>
                    {this.updater}
                </div>
            </div>
        );
    }
}

但是，当我这样做时，我得到了错误Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {isMounted, enqueueSetState, enqueueReplaceState, enqueueForceUpdate}). If you meant to render a collection of children, use an array instead.

这对我来说很奇怪，因为当我用它做完全相同的事情时，this.number它工作得很好，正确地显示了数字。

如何updater在渲染功能中显示？

以下是如果他们simple_number_updater.jsx有simple_number.jsx帮助的话：

simple_number_updater.jsx

import React, { Component } from 'react';

export default class SimpleNumberUpdater extends Component {
    constructor (props) {
        super(props);
        this.state = {
            target: this.props.target
        };

        this.handle_increment = this.handle_increment.bind(this);
        this.render = this.render.bind(this);

    }

    handle_increment () {
        this.target.setState({ value: this.target.state.value + 1});
    }

    render () {
        return (
            <div>
                <button onClick={ this.handle_increment }>Increment</button>
            </div>
        );
    }
}

simple_number.jsx

import React, { Component } from 'react';

export default class SimpleNumber extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: this.props.value
        };

        this.render = this.render.bind(this);
    }

    render () {
        return (
            <div>
                <span className="primary">{this.state.value}</span>
            </div>
        );
    }
}

标签： javascriptreactjs

解决方案

好的，如果我理解得很好，你想模块化你的增量按钮，我认为你应该检查你的反应模式，因为你在this对象中放了很多东西，你应该使用 state 如果你想让一个组件可重用，只需导出它并将要重用的变量作为 props 传递，如下所示：

另请注意，通过导出和导入按钮，您已经可以直接在渲染中使用它，如下所示：

import React, { Component } from 'react';
import SimpleNumber from "./simple_number.jsx"
import SimpleNumberUpdater from "./simple_number_updater.jsx"

export default class UpdatableNumber extends Component {

       state = {  // in recent React version you can remove the  constructor 
                  // and just put your value inside the business_logic part of your component
            number_value: this.props.value
       }



    render () { 
        return (
            <div>
                <div>
                    <SimpleNumber hereAProps={this.state.someState}/>
                    <SimpleNumberUpdater hereAnotherProps={this.state.someState}  />
                </div>
            </div>
        );
    }
}

我的建议： - 回顾状态 - 回顾父母和孩子之间的道具沟通然后重新试一试

推荐阅读