ReactJS

Question

我想通过这种方式将值传递给组件，但是当我尝试 console log this.props.vouch 它时 returns 一个未定义的值。我知道如果我输入它会起作用：

<Something onClick={this.log} vouch=this.props.vouch />

和

ReactDOM.render(<List vouch="value 1"/>, document.getElementById('react-app'))

但我稍后会想在代码中使用不同的凭证值并能够重用 Something 组件。

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="value 1" />
            <Something onClick={this.log} vouch="value 2" />
            );
    }
});
ReactDOM.render(<List />, document.getElementById('react-app'));

Answer 1

您没有将 this.props.vouch 传递给 List，因此您的日志将 return 未定义。

var Something = React.createClass({
    propTypes:{
        vouch: React.PropTypes.string,
    },
    onClick: function() {
        this.props.onClick( this.props.vouch )
    },
    render: function() {
        return (
            <div>
                <h1 onClick={this.onClick.bind( this )} vouch={this.props.vouch}>Click!</h1>
            </div>
        );
    }
});

var List = React.createClass({

    log: function( vouch ) {
        console.log( vouch );
    },
    render: function  () {
        return this.props.vouch.map( vouch => <Something onClick={ log } vouch = { vouch } /> )
    }
});
var vouch = [
  {
    value: 'foo'
  },
  {
    value: 'bar'
  }
]
ReactDOM.render(<List vouch={ vouch } />, document.getElementById('react-app'));

你的日志不工作的实际问题也可以通过将 List.log 传递给 Something（你已经这样做了）然后在 Something 的上下文中调用它来解决使用 <h1 onClick={ this.props.onClick.call( this ) 并具有 log console.log( this.props.vouch ) 但从可维护性的角度来看，此解决方案很糟糕。

了解您正在创建的组件之间的 parent->child 关系很重要。在任何时候你都可以获取你的 vouch 数据并注入它，但是通过在 List 组件中注入它你可以保持所有 children 纯粹，即当你渲染时你正在传递系统状态，您不会在渲染的 life-cycle 期间尝试获取状态或更糟的是改变状态。

Answer 2

您不能从子组件设置 this.props，但您可以使用 data attributes 传递数据，就像这样

<h1 onClick={this.props.onClick} data-vouch={this.props.vouch}>Click!</h1>

...

log: function (e) {
    console.log(e.target.dataset.vouch);
},

Example

或使用.bind，像这样

<h1 onClick={this.props.onClick.bind(null, this.props.vouch)}>Click!</h1>

...

log: function (vouch) {
  console.log(vouch);
},

Example

或者在子组件中调用回调并传递 props，像这样

handleClick: function () {
  this.props.onClick(this.props.vouch)
},

render: function() {
  return (<div>
    <h1 onClick={this.handleClick}>Click!</h1>
  </div>)
}

...

log: function (vouch) {
  console.log(vouch);
},

Example

ReactJS - 在最终 ReactDOM.render() 之前将道具值传递给组件

ReactJS - Passing prop value to component before final ReactDOM.render()

components

properties