Question

我是react.js的新手，我刚刚开始阅读一本展示嵌套组件的书，并展示了如何将属性传递给子元素。这是一个例子。

var GreetingComponent = React.createClass({
  render: function() {
  return <div>Hello {this.props.name}</div>;
}
});

var GenericComponent = React.createClass({
  render: function() {
  return <GreetingComponent name={this.props.name} />;
}
});

React.render(<GenericComponent name="World" />,
document.getElementById('container'));

正如本书所说“从GenericComponent的顶级属性开始，您可以传递此属性通过将this.props用于子元素GreetingComponent。“这就是呈现”Hello World“的原因。

但是，如果我想为了论证，我想要相同的结构，但我希望每个组件都有不同的道具值，比如

var GreetingComponent = React.createClass({
  render: function() {
  return <div>Hello {this.props.anotherName}</div>;
}
});

var GenericComponent = React.createClass({
  render: function() {
  return <GreetingComponent name={this.props.name} />;
}
});

React.render(<GenericComponent name="World" anotherName="Earth"/>
document.getElementById('container'));

检查here。

这不起作用，也没有渲染。

我如何拥有两个具有不同道具值的嵌套组件？请解释并帮助我理解。

谢谢。

Answer 1

要使<GreetingComponent name={...} />生效，GreetingComponent必须拥有name属性。

由于GenericComponent呈现GreetingComponent，您必须将名称作为属性传递给GenericComponent，例如名为greetingName，以便将其传递给{{1} } {} GreetingComponent。

现在，您希望name拥有自己的名称，因此您必须为其提供第二个道具。

请在此处查看解决方案：https://jsfiddle.net/5kk90t0k/。

嵌套反应组件可以有不同的道具吗？

1 个答案: