Question

我很难创建一个动态应用程序，该应用程序将在触发api调用时更改表的显示值。

按下按钮将刷新表格内容。

该按钮将确定get api调用的网址链接

Component 1

<Button onClick={() => viewDetails()}>View Details</Button>

function viewDetails() {
const url= "url" +    detail +    "/details");
}

然后该网址将发送到另一个组件，该组件将获得响应

Component 2

const getServerData = async ({ filters, sortBy, pageSize, pageIndex }) => {
  await new Promise(resolve => setTimeout(resolve, 500));

   const res = await axios.get(url)
}


export default function() {
const { rows, pageCount } = await getServerData({
      filters,
      sortBy,
      pageSize,
      pageIndex
    });

}

是否可以将网址发送到其他组件？

如果可能，如何导入/导出const以在其他组件中检索？如果我这样做会影响应用程序的性能吗？有更好的方法吗？

Answer 1

ParentComponent.js

class Parent extends React.Component{
  state = {
    url: '',
  }
  setURL = (url) => { this.setState({ url: url }) };

  render(){
    return (
      <>
        <Button onClick={this.setURL} />
        <Another url={this.state.url} />
      </>
    )
  }
}

Button.js

const Button = (props) => {
  return ( <button onClick={props.onClick}>button</button>);
}

Another.js

const Another = (props) => {

  console.log(props.url); // You can use updated URL
  return (
    <div>
      ...
    </div>
  )
}

在Button上单击时将值传递给具有异步响应的另一个组件的方法

1 个答案: