React 道具值日志 "undefined"

Question

我用一小段代码重现了一个问题。基本上我想控制台记录 components prop 的值。但它一直在记录 "undefined"

    var Something = React.createClass({
    propTypes:{
        vouch: React.PropTypes.string
    },

    render: function() {
        return (
        <div>
            <h1 onClick={this.props.onClick} vouch={this.props.vouch}>Click!</h1>
        </div>
        );
    }
});
var List = React.createClass({
    log: function() {
        console.log(this.props.vouch);
    },
    render: function  () {
        return (
            <Something onClick={this.log} vouch="test" />
            );
    }
});
ReactDOM.render(<List />, document.getElementById('react-app'));

Answer 1

你是不是忘了用 props:vouch 来传递了？

<PeopleList vouch="test">

您似乎误解了代码中的内容：

<h1 text="Increment!" onClick={this.log} vouch="Test">Click!</h1>

您实际上是将 "test" 传递给 h1 元素，这没有意义。

您还可以将 props 作为一项要求，这样如果您没有正确传递 props，您就可以在控制台中看到错误消息：

propTypes:{
    vouch: React.PropTypes.string.isRequired
},

React 道具值日志 "undefined"

React prop value logs "undefined"

components

properties

undefined

reactjs