为什么我的React Component的Render Props方法不起作用？

Question

I have a problem. I'm trying do the method Render Prop but it not is working.

My project is: It has to render some names of ComponentDidMount , and I can get it to do the filter and to filter the names. But I passed the function filter for a component, and do the Render Prop .

I pass it here:

 import React from 'react'; import './Body.css'; import { Link } from "react-router-dom"; import axios from 'axios'; import Filter from './Filter'; class Body extends React.Component { constructor(props) { super(props); this.state = { employee: [] } } componentDidMount() { axios .get("http://127.0.0.1:3004/employee") .then(response => this.setState({ employee: response.data })); } getName = (filter) => { const { employee, add } = this.state; return employee.filter(employee => employee.name.includes(filter)).map(name => ( <div className='item' key={name.id}> <Link className="link" to={`/user/${name.id}`}> <div key={name.id}> <img className="img" alt="imgstatic" src={`https://picsum.photos/${name.id}`} /> </div> <h1 className="name2"> {name.name} </h1> </Link> </div> )); }; getValueInput = (evt) => { const inputValue = evt.target.value; this.setState({ input: inputValue }); } render() { return ( <div> <h4 className="manager"> Hello {this.props.currentManager}, here be all employees available for change. </h4> <div className="body"> {this.getName()} </div> <div className='input'> <Filter render={this.getName} /> </div> </div> ) } } export default Body; 

And here I get him:

 import React from 'react'; class Filter extends React.Component { constructor() { super(); this.state = { input: '' } } getValueInput = (evt) => { const inputValue = evt.target.value; this.setState({ input: inputValue }); console.log(); console.log(this.state.input) } render() { return ( <div> <input placeholder='Search name here' type="text" onChange={this.getValueInput} /> </div> ) } } export default Filter 

But something's not working...

Can someone help me?

Answer 1

You are not at all using the render prop being supplied to the Filter component. Also the objective of render prop is to render the data, go using this.getName() inside the render Body Component isn't correct either(for one you are not passing the filter value to the getName). You would use it like

import React from 'react';
import './Body.css';
import { Link } from "react-router-dom";
import axios from 'axios';
import Filter from './Filter';

class Body extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      employee: []
    }
  }

  componentDidMount() {
    axios
      .get("http://127.0.0.1:3004/employee")
      .then(response => this.setState({ employee: response.data }));
  }

  getName = (filter) => {
    const { employee, add } = this.state;
    return employee.filter(employee => employee.name.includes(filter)).map(name => (
      <div className='item' key={name.id}>
        <Link className="link" to={`/user/${name.id}`}>
          <div key={name.id}>
            <img className="img" alt="imgstatic"
              src={`https://picsum.photos/${name.id}`}
            />
          </div>
          <h1 className="name2"> {name.name} </h1>
        </Link>
      </div>
    ));
  };


  getValueInput = (evt) => {
    const inputValue = evt.target.value;
    this.setState({ input: inputValue });
  }

  render() {
    return (
      <div>
        <h4 className="manager"> Hello {this.props.currentManager}, here be all employees available for change. </h4>
        <div className='body'>
          <Filter render={this.getName} />
        </div>
      </div>
    )
  }
}

export default Body;

and Filter as

import React from 'react';

class Filter extends React.Component {
  constructor() {
    super();

    this.state = {
      input: ''
    }
  }

  getValueInput = (evt) => {
    const inputValue = evt.target.value;
    this.setState({ input: inputValue });
    console.log();

    console.log(this.state.input)
  }


  render() {
    return ( 
      <React.Fragment>
          {this.props.render(this.state.input)}
          <div className='input'>
            <input placeholder='Search name here' type="text" onChange={this.getValueInput} />
          </div>
      </React.Fragment>
    )
  }
}

Note React.Fragment is available from v16.2.0 onwards and if you are not using the relevant version replace React.Fragment with <div>