Question

我是新手反应并学习如何用反应创建rest api。我试图从数据库中获取数据并将其填充到选择组件中。好吧，我可以做到这一点。但事实是我已经创建了两个这样的组件。

const REQ_URL = '/api/get-code-list/';

class CodeListComponent extends Component {

    constructor(props){
        super(props);

        this.state = {
            options: []
        };
    }

    componentDidMount(){
        fetch(REQ_URL,{
            method:'GET'
        })
        .then(response => response.json())
        .then(data =>{
            this.setState({
                options:data
            })
        })
    }

    render() {
        return(
          <select name="code_list" class="form-control">
          {this.state.options.map(item => (
                <option key={item.id} value={item.code}>{item.name}</option>
                )
          )}
          </select>  
        )
    };
}

const REQ_URL = '/api/get-location-list/';

class LocationListComponent extends Component {

    constructor(props){
        super(props);

        this.state = {
            options: []
        };
    }

    componentDidMount(){
        fetch(REQ_URL,{
            method:'GET'
        })
        .then(response => response.json())
        .then(data =>{
            this.setState({
                options:data
            })
        })
    }

    render() {
        return(
          <select name="location_list" class="form-control">
                    {this.state.options.map(item => (
                <option key={item.id} value={item.code}>{item.name}</option>
                )
          )}
          </select>  
        )
    };
}

我的问题是这两个组件非常相似。所以我在想为什么不创建一个公共组件并在调用组件时通过参数传递url。而不是做

<div class="form-group">
    <CodeListComponent/> 
</div>
<div class="form-group">
    <LocationListComponent/> 
</div>

我想这样做并传递网址，但无法理解它是如何完成的。

<div class="form-group">
    <CustomListComponent/> 
</div>
<div class="form-group">
    <CustomListComponent/> 
</div>

Answer 1

好像你需要一个url和name道具。然后，请务必在CustomListComponent中使用这些道具值。还添加了一个处理更改事件的示例：

class CustomListComponent extends Component {

  state = {
    options: []
  };

  componentDidMount(){
    fetch(this.props.url,{
      method:'GET'
    })
    .then(response => response.json())
    .then(data => {
        this.setState({
          options: data
        });
    });
  }

  render() {
    const { name, onChange } = this.props;
    return(
      <select name={name} class="form-control" onChange={onChange}>
        {this.state.options.map(item => (
            <option key={item.id} value={item.code}>{item.name}</option>
          )
        )}
      </select>
    )
  };
}

用法：

<div class="form-group">
  <CustomListComponent
    url="/api/get-code-list/"
    name="code_list"
    onChange={this.handleCodeListChange}
  />
</div>
<div class="form-group">
  <CustomListComponent
    url="/api/get-location-list/"
    name="location_list"
    onChange={this.handleLocationListChange}
  />
</div>

Answer 2

我会调用父级中的外部URL，然后将列表作为prop传递给列表组件。在我看来，这似乎是最好的方式。

编辑为了澄清，您可以让列表的父级进行API调用以检索数组，然后将数组作为道具传递到列表中，如下所示：

class Parent extends Component {
    ...

    componentDidMount() {
        /* make API call */
        myArr = someAPICall(url)

        this.setState({myArr});
    }

    render() {
        return (
            <MyListComponent arr={this.state.myArr} />
        );
    }
}

如何创建一个通用组件来减少ReactJS中类似的单独组件创建？

2 个答案: