Как передать переменную в компонент, полученный в реквизит?

Question

В Layout.jsx у меня есть следующая структура, где дети - это Компонент.

Как я могу передать имя для дочернего компонента?

const Home = () => {
    return <h1>Hello world!</h1>; {/* here I need the name */}
};

class App extends Component {
    render() {
        return (
        <Layout>
            <Switch>
                <Route path='/' component={Home}/>
                ...
            </Switch>
        </Layout>
        );
    }
}

class Layout extends Component {
    name = "John";
    render() {
        const { children } = this.props;
        return (
        <div>
            { children }
        </div>
        );
    }
}

Answer 1

Попробуйте const {children: Child} = this.props;

Answer 2

Реактивный компонент должен быть в верхнем регистре.Если переменная child содержит компонент React, вы можете просто сохранить его внутри какой-то заглавной переменной и затем отобразить как тег.

const { child: Child } = this.props;

return (
  <div>
    <Child name={this.name} />
  </div>
);