如何将 props.children 放在 JSX 标签中
How to put props.children in JSX tag
我有这样一个组件:
class Person extends React.Component {
render() {
const { language } = this.props;
return (
<div>
I speak {language}
</div>
);
}
}
还有像这样的高阶组件:
export default (BaseComponent) =>
class extends React.Component {
render() {
return <BaseComponent language="English" />;
}
}
我用过它们:
class PersonList extends Component {
render() {
const NewPerson = hoc(Person)
return <NewPerson />;
}
}
非常好,输出了我想要的
I speak English
但是,如果我希望 PersonList 组件呈现从其父项传递下来的内容而不是导入的内容,该怎么办,如下所示:
render(
<PersonList>
<Person />
</PersonList>,
document.getElementById('app')
)
现在,
const NewPerson = hoc(Person)
抛出错误。
我知道我可以像这样修复 HOC
return <div>{React.cloneElement(BaseComponent, { language: "English" })}</div>
但这是一个破坏性的变化,我不想这样做。
无论如何我可以在不破坏我的 HOC 的情况下归档我的目标(HOC 组件呈现传递下来而不是导入的东西)吗?
或者有任何变通办法吗?
您可以通过这种方式添加由高阶组件创建的 Person 组件:
const NewPerson = hoc(Person)
render(
<PersonList>
<NewPerson />
</PersonList>,
document.getElementById('app')
)
将 {this.props.children}
添加到您的 PersonList 的呈现函数:
class PersonList extends React.Component {
render() {
return(
<div>
{this.props.children}
</div>
)
}
}
我有这样一个组件:
class Person extends React.Component {
render() {
const { language } = this.props;
return (
<div>
I speak {language}
</div>
);
}
}
还有像这样的高阶组件:
export default (BaseComponent) =>
class extends React.Component {
render() {
return <BaseComponent language="English" />;
}
}
我用过它们:
class PersonList extends Component {
render() {
const NewPerson = hoc(Person)
return <NewPerson />;
}
}
非常好,输出了我想要的
I speak English
但是,如果我希望 PersonList 组件呈现从其父项传递下来的内容而不是导入的内容,该怎么办,如下所示:
render(
<PersonList>
<Person />
</PersonList>,
document.getElementById('app')
)
现在,
const NewPerson = hoc(Person)
抛出错误。
我知道我可以像这样修复 HOC
return <div>{React.cloneElement(BaseComponent, { language: "English" })}</div>
但这是一个破坏性的变化,我不想这样做。
无论如何我可以在不破坏我的 HOC 的情况下归档我的目标(HOC 组件呈现传递下来而不是导入的东西)吗?
或者有任何变通办法吗?
您可以通过这种方式添加由高阶组件创建的 Person 组件:
const NewPerson = hoc(Person)
render(
<PersonList>
<NewPerson />
</PersonList>,
document.getElementById('app')
)
将 {this.props.children}
添加到您的 PersonList 的呈现函数:
class PersonList extends React.Component {
render() {
return(
<div>
{this.props.children}
</div>
)
}
}