Question

我想将渲染的输入导入并过滤到组件中。我的主App.jsx包含已呈现的输入，我想将这些输入导入我的SearchBar.jsx，过滤，导出并在App.jsx中呈现。另外，由于我是React的新手，我觉得这可能有很长的路要走，并想知道什么是最佳做法？

renderReminders的课程App中的

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

创建另一个知道如何呈现提醒列表的组件（Reminders）。然后，将App的提醒传递给SearchView作为道具，过滤它们，然后传递给Reminders中呈现的SearchView元素。

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
);

如果您希望在搜索视图旁边呈现提醒，而不是嵌入搜索视图中：

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
);

React：如何将渲染输入导入和过滤到组件中？

1 个答案: