Question

我正在尝试在代码中的<DropdownLink />内执行<BootstrapDropdown />，但是我不知道该怎么做。

我试图用React文档解决问题，但是什么也没找到。

App.js

import React from 'react';
import '../scss/app.scss';
import BootstrapDropdown from './helpers/bootstrapDropdown';
import DropdownLink from './helpers/dropdownLink';

function App() {
  return (
    <div className="App">
      <BootstrapDropdown name={"Dropdown"}>
        <DropdownLink name={"Strona główna"} href={"/"} />
      </BootstrapDropdown>
    </div>
  );
}

export default App;

dropdownLink.js

import React from 'react';

class DropdownLink extends React.Component {
  render() {
    return <a className="dropdown-item" href={this.props.href}>{this.props.name}</a>
  }
}

export default DropdownLink;

bootstrapDropdown.js

import React from 'react';

class BootstrapDropdown extends React.Component {
  render() {
    return <div className="dropdown">
      <button className="btn btn-secondary dropdown-toggle" type="button" id="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        {this.props.name}
      </button>
      <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
      </div>
    </div>
  }
}

export default BootstrapDropdown;

我想在<DropdownLink />中的<div className="dropdown-menu"></div>内显示<BootstrapDropdown />。

Answer 1

您需要明确说明在何处渲染子代：

import React from 'react';

class BootstrapDropdown extends React.Component {
  render() {
    return <div className="dropdown">
      <button className="btn btn-secondary dropdown-toggle" type="button" id="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        {this.props.name}
      </button>
      <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
          {this.props.children}
      </div>
    </div>
  }
}

export default BootstrapDropdown;

反应组件中的组件

1 个答案: