在反应预输入引导程序中将变量传递给`renderMenuItemChildren`

Question

它从App 组件将变量item 传递给Todo 组件。从Todo 组件传递到SearchResult 组件。但是，`SearchResult '组件没有显示出来。

在这里演示：https://stackblitz.com/edit/react-e2zqvd

import {Typeahead} from 'react-bootstrap-typeahead';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: [{id:1, name: 'mario'}, {id:2, name: 'paul'}],
      item: 'flower'
    };
  }

  render() {
    return (
      <div>
        <Todo
          item = {this.state.item}
          name = {this.state.name}
        />
      </div>
    );
  }
}

class Todo  extends Component {
  constructor(props){
    super(props);

  }

  render () {
    return (
      <div>
          <Typeahead
            id={'example4'}
            labelKey= 'name'
            multiple
            options={this.props.name}
            onChange={this.handleSelectPeopleToCalendar}
            ref={(ref) => this._typeahead = ref}
            renderMenuItemChildren={(option, props) => (
              <SearchResult
                key={option.id} 
                user={option} 
                item={props.item}
              />
            )}
          />
      </div>
    )
  } 
}

const SearchResult = ({user, item}) => (
    <div>
        <p>{item}</p>
        <span>{user.name}</span>
  </div>
);

Answer 1

试试

<SearchResult
            key={option.id} 
            user={option} 
            item={this.props.item}
          />

你需要开始输入一些东西才能看到这个组件，输入没有边框，没有背景