React: Wie importiere ich gerenderte Eingaben in eine Komponente?

Question

Ich möchte gerenderte Eingaben in eine Komponente importieren und filtern. Meine Haupt App.jsx enthält die gerenderten Eingänge und ich möchte diese in meine SearchBar.jsx importieren, filtern, exportieren und in App.jsx rendern. Da ich neu bei React bin, denke ich, dass dies ein langer Weg ist und frage mich, was die beste Praxis ist.

renderReminders Methode in der Klasse App von App.jsx:

renderReminders() { 
    //access our reminders 

    const {reminders} = this.props; 

    return (
     <ul className="list-group col-sm-4"> 
     { 
      reminders.map(reminder => { 
      return (
       <li key={ reminder.id } className="list-group item"> 
       <div className="list-item">{ reminder.text } 
        <div className="list-item delete-button" 
        onClick={() => this.deleteReminder(reminder.id)}> 
        &#x2715; 
        </div> 
       </div> 
       </li> 
      ) 
      }) 
     } 
     </ul> 
    ) 
    } 

SearchBar.jsx:

export class SearchView extends Component{ 
    //initialize the component 
    constructor(){ 
     super(); 
     this.state={ 
      input:"" 
     } 
     autoBind (this); 
    } 
    //handle event change in the input 
    handleChange(event){ 
     this.setState({ 
      input:event.target.value 
      }); 

    } 
    //render the filtered list from input 
    render(){ 
     let filterReminders=addReminder.filter(word=>{ 
      if (word.indexOf(this.state.input) !== -1){ 
       return true; 
      } 
     }); 

Answer 1

einer weiteren Komponente erstellen (Reminders), der weiß, wie man eine Liste von Erinnerungen zu machen. Übergeben Sie dann die App Erinnerungen an SearchView als Requisiten, filtern Sie sie und übergeben Sie sie an das Reminders Element, das in SearchView gerendert wird.

class App extends Component { 
    render() { 
    const reminders = //get reminders; 
    return (
     <div> 
     <SearchView reminders={reminders} /> 
     <div> 
    ); 
    } 
} 

class SearchView extends Component { 
    render() { 
    const filterReminders= this.props.reminders.filter(r => /*some filter*/); 
    return (
     <div> 
     <Reminders reminders={filteredReminders}/> 
     </div> 
    ) 
    } 
} 

const Reminders = ({ reminders }) => (
    // render reminders 
); 

Wenn Sie neben Ihrer Suche Ihre Erinnerungen gemacht haben, anstatt in der Suchansicht eingebetteter:

class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { searchValue: '' }; 
    } 

    render() { 
    const reminders = // get reminders; 
    const filteredReminders = reminders 
     .filter(reminder => /* some filter */); 
    const { searchValue } = this.state; 

    return (
     <div> 
     <SearchView value={searchValue} onChange={evt => this.setState({ searchValue: evt.target.value }) /> 
     <Reminders reminders={filteredReminders}/> 
     </div> 
    ) 
    } 
} 

const SearchView = ({ value, onChange }) => (
    <input value={value} onChange={onChange}/> 
); 

const Reminders = ({ reminders }) => (
    // render reminders 
);