Question

我有问题。我尝试使用Render Prop方法，但它不起作用。

我的项目是：它必须呈现ComponentDidMount的一些名称，我可以让它来做过滤器并过滤名称。但是我为组件传递了函数filter，然后执行Render Prop。

我在这里传递：

＆＃13;

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;

＆＃13;

在这里，我得到了他：

＆＃13;

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

＆＃13;

但有些事情没有用......

有人可以帮助我吗？

Answer 1

您根本不使用提供给Filter组件的render prop。渲染道具的目标是渲染数据，使用渲染中的this.getName()内部组件也不正确（对于没有将过滤器值传递给getName的一个）。你会像

一样使用它

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;

和过滤为

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

注意从{v1.2.0开始提供React.Fragment可用，如果您未使用相关版本，请将React.Fragment替换为<div>

为什么我的方法渲染React组件的道具不起作用？

1 个答案: