React-Admin：如何在没有“source”的情况下访问值？

Question

我正在尝试在 中创建一个动态按钮react-admin。
对于每个按钮，它都会点击一个唯一的地址，我该怎么做？

不幸的是，我有这个错误：props.username is undefined。

export const LoginCredentialList = (props) => (
  <List {...props} pagination={<PostPagination/>}>
    <Datagrid>
       <TextField label="Username" source="username" />
       <Button label="Re-invoke Login"
          onClick={() => {       
            axios.get("http://localhost:8080/admin/" + somehow_read_username_here)
                 .then((res)=>console.log(res));
             }}
        />
    </Datagrid>
  </List>
);

这是parent调用或使用上述组件的地方：

class SPanel extends React.Component {
  render() {
    return (
      <div>
        <Admin dataProvider={restDataProvider}>
          <Resource name="loginCredential" list={LoginCredentialList} />
            ...

Answer 1

我以前没有使用过react-admin，但在快速浏览其文档后，我了解到的是

• props您在组件中收到的内容LoginCredentialList包含记录列表
• Datagrid迭代此列表并将单个组件传递record给子Field组件
• Field组件接收record作为注入的 propreact-admin

虽然react-admin提供了许多标准Field组件，但它没有ButtonField.

所以你可以编写自己的Field组件。（https://marmelab.com/react-admin/Fields.html#writing-your-own-field-component）

就像是：

const ButtonField = ({source, record}) => (
    <Button label="Re-invoke Login" onClick={()=>{
        axios
            .get("http://localhost:8080/admin/"+record[source])
            .then((res)=>console.log(res));
    }}/>
);

然后将它用作您的主要组件

export const LoginCredentialList = (props) => (
    <List {...props} pagination={<PostPagination/>}>
        <Datagrid>
            <TextField label="Username" source="username" />
            <ButtonField source="username" />
        </Datagrid>
    </List>
);

试试这个。