如何将道具传递给 React 中的另一个组件？

Question

所以我有一个 table 组件，在第一列中有一个搜索过滤器 onPressEnter，我希望我的 searchBar 组件基本上做同样的事情。

在我的 table.js 中，我想将 confirm() 传递给 Searchbar.js

const columns = [
    {
      key: "1",
      title: "Title",
      dataIndex: "title",
      render: (text) => <a href="/">{text}</a>,
      sorter: (record1, record2) => record1.title.localeCompare(record2.title),
      filterDropdown: ({ setSelectedKeys, selectedKeys, confirm }) => {
        return (
          <Input
            autoFocus
            placeholder="Search Column..."
            value={selectedKeys[0]}
            onChange={(e) => {
              setSelectedKeys(e.target.value ? [e.target.value] : []);
            }}
            onPressEnter={() => {
              confirm();
            }}
            onBlur={() => {
              confirm();
            }}
          ></Input>
        );
      },
      filterIcon: () => {
        return <SearchOutlined />;
      },
      onFilter: (value, record) => {
        return record.title.toLowerCase().includes(value.toLowerCase());
      }
    },]

这是我的 Searchbar.js

function Searchbar() {
  return (
    <div>
      <Form className="d-flex align-items-start">
        <Form.Control
          type="search"
          placeholder="Enter a keyword or a company name..."
        />
        <Button>Search</Button>
      </Form>
    </div>
  );
}

export default Searchbar;

我还制作了一个 codesandbox project 以更好地可视化我的问题。所以我有一个主要的搜索栏组件，我希望它做与 table 组件中的搜索过滤器相同的事情。那可能吗？如果是这样，解决这个问题的最佳方法是什么？我感谢任何帮助。谢谢！

Answer 1

将你的SearchBar设为React.Component，然后就可以使用props来传递数据了或从其父组件运行。

您可以按照以下方式进行：

import React, {Component} from "react";
import { Form, Button } from "react-bootstrap";

// change the SearchBar to Component
class Searchbar extends Component{
  constructor(props){
    // then you can use props to pass data 
    // or function from its parent component
  }

  render(){
    return (
      <div>
        <Form className="d-flex align-items-start">
          <Form.Control
            type="search"
            placeholder="Enter a keyword or a company name..."
          />
          <Button>Search</Button>
        </Form>
      </div>
    );
  }
}

export default Searchbar;

你也可以用简单的方法来做：

function Searchbar(props) {
  // use props to pass data from parent component
  return (
    <div>
      <Form className="d-flex align-items-start">
        <Form.Control
          type="search"
          placeholder="Enter a keyword or a company name..."
        />
        <Button>Search</Button>
      </Form>
    </div>
  );
}

export default Searchbar;

您可以从 Official Document 找到更多关于 Custom Component 和 props 的信息。

如果你使用TypeScript，你可以定义一个IProps接口：

interface IProps{
  data: number,
  onConfirm(): void
}

使用SearchBar时，按如下操作：

<SearchBar
    data = 1,
    onConform={() =>{
        // do something, when calling onConrfim() function
    }}>
</SearchBar>

Answer 2

我建议进行重构。将您的数据和搜索逻辑向上移动一个级别到父级，并作为 props 传递给子组件，如下所示：

import React, { useState, useEffect } from "react";
import Searchbar from "../components/Searchbar";
import MyTable from "../components/Table";

export default function HomeAfterSearch() {
  const [data, setData] = useState([]);
  const [searchText, setSearchText] = useState("");
  const [loading, setLoading] = useState(true);

  const getData = () => {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((response) => response.json())
      .then((data) => {
        setData(data);
      })
      .catch((err) => {
        console.log(err);
      })
      .finally(() => {
        setLoading(false);
      });
  };

  useEffect(() => {
    getData();
  }, []);

  return (
    <div className="App">
      <Searchbar searchText={searchText} setSearchText={setSearchText} />
      <MyTable
        searchText={searchText}
        setSearchText={setSearchText}
        data={data.filter((item) => {
          if (!searchText) return true;
          else if (
            JSON.stringify(item)
              .toLowerCase()
              .includes(searchText.toLowerCase())
          )
            return true;
          else return false;
        })}
      />
    </div>
  );
}

那么在 MyTable 中你可以这样声明：

function MyTable(props) {
const { data, loading } = props;
.....

并且 SearchBar 像这样：

function Searchbar(props) {
const { searchText, setSearchText } = props;

如何将道具传递给 React 中的另一个组件？

How to pass props to another component in React?

javascript

frontend

reactjs

react-native

antd