Question

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

<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，但您可以使用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

或在子组件中调用回调并传递道具，如此

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

Answer 2

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

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 )的上下文中调用它来解决。 {1}}并且log console.log( this.props.vouch )但是从可维护性角度看这个解决方案会很糟糕。

了解您正在创建的组件之间的parent-gt;子关系非常重要。在任何时候你都可以抓住你的vouch数据并注入它，但是通过在List组件上注入它可以让所有孩子都保持纯净，即当你渲染你正在通过系统状态时，你不会试图在渲染的生命周期中抓住状态或更糟，变异，状态。

ReactJS - 在最终的ReactDOM.render（）之前将prop值传递给组件

2 个答案: