Question

我很想做出反应。

var Ad=React.createClass({
    render:function(){
        return(<b>{this.props.name}</b>)
    }
})
var Az=React.createClass({
    render:function(){
        return(<b>{this.props.class}</b>)
    }
})
var Aa=React.createClass({
    render:function(){
        return(<div>
            <Ad name={this.props.name}/>
            <Az name={this.props.class}/>
            </div>)
    }
})
ReactDOM.render(<Aa name="vijay" class="Asd"/>,document.body)

但它只显示vijay而不是Asd为什么？反应支持它传递两个道具。

Answer 1

您的组件Az期待名为class的属性：

return(<b>{this.props.class}</b>)

但是在您的代码中，您只提供了属性name：

<Az name={this.props.class}/>

您应该将其更改为class才能发挥作用。

然而，还有另一个问题。 class是React中的保留关键字，因此您应该将class更改为代码中的其他内容，例如myclass：

// 'class' was changed to 'myclass' in the code below
var Az=React.createClass({
    render:function(){
        return(<b>{this.props.myclass}</b>)
    }
})
var Aa=React.createClass({
    render:function(){
        return(<div>
            <Ad name={this.props.name}/>
            <Az myclass={this.props.myclass}/>
            </div>)
    }
})
ReactDOM.render(<Aa name="vijay" myclass="Asd"/>,document.body)

Answer 2

您永远不应该直接向组件渲染组件。这是一个不好的做法。这就是link

的原因

反应中的多个组件

2 个答案: