Reactjs 反应：如何将渲染输入导入并过滤到组件中？

我想将渲染输入导入并过滤到组件中。我的主

App.jsx

包含呈现的输入，我想将这些输入导入我的

SearchBar.jsx

，在

App.jsx

中过滤、导出和呈现。此外，由于我是新的反应，我觉得这可能是一个很长的路，想知道什么是最好的做法

App.jsx的
App
类中的
renderReminders
方法：

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

创建另一个组件（
提醒
），它知道如何呈现提醒列表。然后，将
App
的提醒作为道具传递给
SearchView
，过滤它们，并传递给
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
);

类应用程序扩展组件{
render（）{
常量提醒=//获取提醒；
返回(
);
}
}
类SearchView扩展组件{
render（）{
const filterReminders=this.props.emminders.filter（r=>/*一些过滤器*/）；
返回(
)
}
}
常量提醒=（{提醒}）=>(
//提供提醒
);

如果要将提醒与搜索视图一起呈现，而不是嵌入搜索视图中，请执行以下操作：

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

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={searchValue:''}；
}
render（）{
常量提醒=//获取提醒；
const filteredReminders=提醒
.filter（提醒=>/*一些过滤器*/）；
const{searchValue}=this.state；
返回(
this.setState（{searchValue:evt.target.value}）/>
)
}
}
const SearchView=（{value，onChange}）=>(
);
常量提醒=（{提醒}）=>(
//提供提醒
);
谢谢您的回答。App.jsx呈现提醒，我是否需要将其取出到employers.jsx，呈现在那里，或者从App.jsx获取提醒列表，并将其传递到SearchView、filter和export到App.jsx？我不明白为什么我们需要（另一个）提醒组件。如果您能解释如何将提醒列表作为变量导出到另一个组件，我将不胜感激。再次感谢。从您的回答中，我看到SearchView组件可能位于App.jsx中。因此，没有必要导出呈现的（用户输入）提醒？如果不查看应用程序，就很难对其结构提出建议。我想做的是演示如何隔离应用程序中每个组件的角色。在我的示例中，
App
获取提醒并在
SearchView
中呈现它们<代码>搜索视图
维护一个输入值，根据该输入过滤一组提醒，并呈现过滤后的提醒<代码>提醒

呈现提醒列表。如果希望

App

呈现过滤后的提醒，则需要重新考虑组件的角色。在这种情况下，

App

呈现

SearchView

，维护从其

SearchView

接收的输入值，根据该输入值过滤提醒列表，并呈现过滤后的提醒<代码>搜索视图呈现输入并将输入值的更改传递给处理程序函数<代码>提醒仍然呈现提醒列表。

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