Question

我在React 0.14.7中渲染子组件时遇到问题 - 就像React完全忽略它一样。

这是启动渲染的方法：

ReactDOM.render(
    React.createElement(
        view,
        {
            name: 'Rob'
        }
    ),
    document.getElementById('content')
);

这是呈现的主视图：

var React      = require('react'),
    LogRegBack = require('log-reg-back-view');

var RegisterView = React.createClass({

    render: function() {
        console.log(1);
        return React.DOM.div({
            children: [
                'Hello, ' + this.props.name,
                LogRegBack,
                ' How are you?'
            ]
        })
    }

});

module.exports = RegisterView;

这是被忽略的LogRegBack子组件：

var React  = require('react'),
    styles = require('../../../css/log-reg-back.css');

var LogRegBack = React.createClass({

    render: function() {
        console.log(2);
        return React.DOM.img({
            className: styles.logRegBack,
            src: '/assets/log-reg-back.jpg'
        });
    }

});

module.exports = LogRegBack;

我正在使用webpack捆绑所有内容，所以我想也许我遇到了配置问题，但我可以在输出文件中看到我的LogRegBack代码，当我在LogRegBack文件中进行更改时，webpack会按预期重建（I使用--watch选项）。此外，当我启动我的网页时，我看到控制台中记录了“1”，但我没有看到“2”。出于某种原因，React甚至没有调用LogRegBack组件的render()方法。

如果我在主视图文件中直接将图像添加为子图像，则图像显示正常：

children: [
    'Hello, ' + this.props.name,
    React.DOM.img({
        className: styles.logRegBack,
        src: '/assets/log-reg-back.jpg'
    }),
    ' How are you?'
]

我做错了什么？

Answer 1

我习惯使用JSX，但我怀疑当你将LogRegBack作为孩子传递给RegisterView时，你需要使用createElement。

反应不渲染孩子

1 个答案: