Я хочу добавить дочерние элементы в элемент demo компонента Wrapper

function Wrapper() {
    return (
        <div className="demo">Something</div>
    )
}
<Wrapper>
    <span>This is something</span>
</Wrapper>

Но это не работает! Как правильно это сделать?

-3
ANURAG GOLDEN 17 Янв 2021 в 10:24

4 ответа

Лучший ответ

Вы можете сделать это с помощью children prop

function Wrapper({children}) {
    return (
        <div className="demo">{children}</div>
    )
}
1
Nilesh Patel 17 Янв 2021 в 07:31

Самый простой способ - вызвать {props.children}

function Wrapper(props) {
  return (
      <div className="demo">{props.children}</div>
  )
}
ReactDOM.render(
  <Wrapper>
      <span>This is something</span>
  </Wrapper>
, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root" ></div>

Из ответа @Soringh Chehresa на Что такое {это .props.children} и когда его следует использовать? скажите, что:

this.props.children служит для отображения всего, что вы вставлять между открывающим и закрывающим тегами при вызове компонента

0
Phong 17 Янв 2021 в 07:35

Измените свой компонент оболочки на это:

function Wrapper({ children }) {
  return (
    <>
      <div className="demo">Something</div>
      {children}
    </>
  );
}
0
Taghi Khavari 17 Янв 2021 в 07:35

Как и в вашей функции-оболочке, просто добавьте детей в качестве аргумента, потому что функция-оболочка должна потреблять что-то, чтобы предоставить вам что-то, поэтому просто передайте дочерние элементы функции-оболочки, которая внутренне отображает ваших детей, переданных в качестве аргумента

function Wrapper({children}) {
    return (
        <div className="demo">{children}</div>
    )
}
0
Bansi Nakhuva 17 Янв 2021 в 07:40
65758231