在 React.js 中的兩個組件之間傳遞數據

Question

目前正在學習 React 並構建一個輔助項目，我可以在我的瀏覽器 window 中呈現 rss-feeds。 它在單個組件中工作。

原始工作組件

function App (){
    const [rssUrl, setRssUrl] = useState(''); 
    const [items, setItems] = useState([]);

    const getRss = async (e) => {
      e.preventDefault();
      const urlRegex =
        /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])?/;
      if (!urlRegex.test(rssUrl)) {
        return;
      }
      const res = await fetch(`https://api.allorigins.win/get?url=${rssUrl}`);
      const { contents } = await res.json();
      const feed = new window.DOMParser().parseFromString(contents, 'text/xml');
      const items = feed.querySelectorAll('item');
      const feedItems = [...items].map((el) => ({
        link: el.querySelector('link').innerHTML,
        title: el.querySelector('title').innerHTML,
        author: el.querySelector('author').innerHTML,
      }));
      setItems(feedItems);
    };
  }
    return (
      <div className="App">
        <form onSubmit={getRss}>
          <div>
            <h1>Next Pod For Chrome</h1>
            <label> rss url</label>
            <br />
            <input onChange={(e) => setRssUrl(e.target.value)} value={rssUrl} />
          </div>
          <input type="submit" />
        </form>
        {items.map((item) => {
          return (
            <div>
              <h1>{item.title}</h1>
              <p>{item.author}</p>
              <a href={item.link}>{item.link}</a>
            </div>
          );
        })}
      </div>
    );
  }

export default App;

目前，我嘗試將功能分成兩個組件。 如何將鏈接從一個組件傳遞到另一個我想觸發由第一個組件處理的 function 的組件？

非常感謝任何提示。 謝謝。

用於搜索 rss-feed 的組件的當前 state

function Search() {
  const [rssUrl, setRssUrl] = useState('');

  const formatRss = async (e) => {
    e.preventDefault();
    const urlRegex =
      /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])?/;
    if (!urlRegex.test(rssUrl)) {
      return;
    }
    console.log(rssUrl);
  };

  return (
    <div className="App">
      <form onSubmit={formatRss}>
        <div>
          <h1>Next Pod For Chrome</h1>
          <label>rss url</label>
          <br />
          <input onChange={(e) => setRssUrl(e.target.value)} value={rssUrl} />
        </div>
        <input type="Submit" />
      </form>
    </div>
  );
}

export default Search;

組件解析和渲染的當前階段

function List(props) {
  const [items, setItems] = useState([]);

  const formatRss = async (e) => {
    e.preventDefault();
    console.log(rssUrl);
    const res = await fetch(`https://api.allorigins.win/get?url=${rssUrl}`);
    const { contents } = await res.json();
    const feed = new window.DOMParser().parseFromString(contents, 'text/xml');
    const items = feed.querySelectorAll('item');
    const feedItems = [...items].map((el) => ({
      link: el.querySelector('link').innerHTML,
      title: el.querySelector('title').innerHTML,
      author: el.querySelector('author').innerHTML,
    }));
    setItems(feedItems);
  };

  return (
    <div className="App">
      {items.map((item) => {
        return (
          <div>
            <h1>{item.title}</h1>
            <p>{item.author}</p>
            <a href={item.link}>{item.link}</a>
          </div>
        );
      })}
    </div>
  );
}

export default List;

Answer 1

您可以在兩者的父級上聲明 state，例如： App.js 並使用 prop 將變量傳遞給組件，如下所示：

export default function App() {
  const [rssUrl, setRssUrl] = useState("");

  return (
    <div className="App">
      <Search rssUrl={rssUrl} setRssUrl={setRssUrl} />
      <List rssUrl={rssUrl} />
    </div>
  );
}

下面是給你的活生生的例子：

https://codesandbox.io/s/cocky-tharp-7d5uu8?file=/src/App.js

有許多平台可以放置演示項目，讓人們更容易回答您的問題。