Передайте компонент оболочки как реквизит в ReactJS
Я пытаюсь передать компонент оболочки как реквизит. В React есть что-то вроде этого технически?
import React, {Component, PropTypes} from 'react';
import ChildComp from './child-comp';
class Comp extends Component {
render() {
const { Wrapper } = this.props;
return (
<Wrapper>
<ChildComp />
</Wrapper>
);
}
}
Comp.propTypes = {};
export default Comp;
Ответы
Ответ 1
Да, это вполне возможно и широко используется. Единственное, что в качестве условного обозначения в заглавных словах JSX означает определенный пользователем компонент, поэтому вам нужно будет иметь свои свойства ниже, и вы должны использовать переменную, используемую для хранения ссылки на компонент.
import React from 'react';
function HelloWorld () {
return (
<span>
<Foo wrapper={Bar}/>
<Foo wrapper="h5"/>
</span>
);
}
class Bar extends React.Component {
render() {
return <h1>{this.props.children}</h1>
}
}
class Foo extends React.Component {
render() {
// the variable name must be capitalized
const Wrapper = this.props.wrapper;
return (
<Wrapper><p>This works!</p></Wrapper>
);
}
}
Для собственных компонентов вы можете передать строку, например: <Foo wrapper="h1"/>
. Это работает, потому что JSX - это просто синтаксический сахар для React.createElement('h1',props, children)
Ответ 2
Вы можете обернуть компоненты несколькими способами. Однако наиболее распространенными являются:
При рендеринге детей jsx явно использует компонент упаковки:
<Wrapper>
<Child />
</Wrapper>
и компонент Wrapper
выглядит следующим образом:
export default class Wrapper extends Component {
render() {
return (
<div>
{ this.props.children }
</div>
);
}
}
- Компонент более высокого порядка
Компонент более высокого порядка (HOC) - это способ комбинирования функций без необходимости изменения разметки jsx. Вы можете изменить jsx, но вы также можете использовать функции mixin без изменения jsx.
Использование HOC выглядит следующим образом:
const Wrapped = Wrapper(Child);
...
<Wrapped />
И сама HOC будет выглядеть так:
export default Child => class extends Component {
render() {
return (
<div>
<Child />
</div>
);
}
}
Ответ 3
https://codepen.io/keshav1706/pen/eWMZwL?editors=0010
здесь код для простого решения.
`
class ComponentOne extends React.Component {
render() {
return(
<div>
<h1>Component One</h1>
<div>{this.props.children}</div>
</div>
)
}
}
class ComponentTwo extends React.Component {
render() {
return(
<h4>hello</h4>
)
}
}
class ComponentThree extends React.Component {
render() {
return(
<h4>component three</h4>
)
}
}
ReactDOM.render(
<div>
<ComponentOne> <ComponentThree/></ComponentOne>
</div>,
document.getElementById('root')
);
`