在React TypeAhead Bootstrap中將變量傳遞給`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}
          />

並且您需要開始輸入一些內容以查看此組件，其中的輸入無邊框且沒有背景