Как вызвать функцию из дочернего компонента?

Question

[uRoot]

У меня есть родитель App:

render() {
    return (
      <div>
        <Filtered items={this.state.items} />
      </div>
    )
  }

И я хочу выполнить функцию (без события) в компоненте Filtered передав туда this.state.items. Как я это могу сделать? А то у меня сейчас в Filtered мой JS код выполняется из render(), а мне бы хотелось, чтобы в render() у меня был только результат выполнения функции.

UPD насколько я понял, если есть необходимость в таком действии, то это говорит о том, что что-то неправильно в архитектуре приложения. И что нет ничего плохого в том, что в компонент передаётся props, который обрабатывается в return(). Правда я насчёт последнего не уверен.

Answer 1

[hzzzzl]

мой JS код выполняется из render(), а мне бы хотелось, чтобы в render() у меня был только результат выполнения функции

а что именно надо сделать?

render() {
  return (
   <div> 
    { this.props.items.map(item => <div>{ item.someText }</div>) }
   </div>
   )
}

если как-то обработать итемы и их отрендерить, то это вполне себе норма, иначе никак

Comments

[uRoot]

а что именно надо сделать?

Я читал на стэковерфлоу, что в render() должны находиться только компоненты и if/else если нужно один компонент скрыть, а другой показать. А у меня же это выглядит вот так:

export default class Filtered extends PureComponent {
  render() {
    let result

    // если пропсы пришли - значит установили фильтр и из род. комп. передались элементы
    if(this.props.items) {
      buildItems(this.props.items)
    } else {
      buildItems(json)
    }

    // рендерим все айтемы и пакуем в переменную
    function buildItems(items) {
      result = items.map((item, i) => {
        return (
          <div key={i} className="item">
            <div><img src={item.img} width="250px" height="250px" alt={item.name}></img></div>
            <h2>{item.name}</h2>
            <p>{item.components}</p>
            <p><span>{item.mass}</span></p>
            <p><span>{item.price}</span></p>
            <button>Заказать</button>
          </div>
        )
      })
    }

    return (
      <div className="content">{result}</div>
    )
  }
}

И я хотел вынести buildItems над render(), и в render() вывести только результат выполнения этой функции.