Question

在 ReactJS 中传递 Props 并访问对象值

2021-07-18

62

javascript reactjs

我对 JS 和 React 还比较陌生，我正在尝试完成一些有趣的事情，因此在父组件中我有一个带有颜色和背景十六进制值的数组/对象，以及一个随机选择器作为常量，所以我想要做的是传递给子组件以使用颜色和背景值，但对我来说不起作用。

父级：

import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import styled from 'styled-components';
import Home from './pages/Home'

export default function App() {
  const colors = [
    {color: '#790100', bg: '#ff5a50'},
    {color: '#700a4b', bg: '#f596d3'},
    {color: '#ffc9ba', bg: '#fec9b9'},
  ]
  const getRanColor = colors[Math.floor(Math.random() * colors.length)];

  const Wrapper = styled.div`
  background: ${getRandomQuote.bg};
  color: ${getRandomQuote.color}`
  return (
    <Router>
      <Switch>
        <Wrapper>
          <Route key="home" globalColor={getRanColor} path="/" component={Home} exact />
        </Wrapper>
      </Switch>
    </Router>
  )
}

子级：

import styled from "styled-components"
export default function Home({globalColor}) {
    const Title = styled.div`
    background: ${globalColor.bg};
    color: ${globalColor.color};`
    return (
        <>
            <Title>Learning React in root.</Title>
        </>
    )
}

所以我不起作用，我看过一些教程，他们倾向于以某种方式这样做，但我就是无法摆脱错误说 TypeError：无法读取未定义的属性“bg”和“color”。

Answer 1

您必须使用 render props 而不是 component props 将 props 传递给您的子组件：

import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import styled from 'styled-components';
import Home from './pages/Home'

export default function App() {
  const colors = [
    {color: '#790100', bg: '#ff5a50'},
    {color: '#700a4b', bg: '#f596d3'},
    {color: '#ffc9ba', bg: '#fec9b9'},
  ]
  const getRanColor = colors[Math.floor(Math.random() * colors.length)];

  const Wrapper = styled.div`
  background: ${getRandomQuote.bg};
  color: ${getRandomQuote.color}`
  return (
    <Router>
      <Switch>
        <Wrapper>
          <Route key="home" path="/" render={() => <Home globalColor={getRanColor}/>} exact />
        </Wrapper>
      </Switch>
    </Router>
  )
}

Answer 2

您正尝试将 globalColor 参数传递到 <Route> 组件，而不是 <Home> 。您需要改用 render props ：

import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import styled from 'styled-components';
import Home from './pages/Home'

export default function App() {
  const colors = [
    {color: '#790100', bg: '#ff5a50'},
    {color: '#700a4b', bg: '#f596d3'},
    {color: '#ffc9ba', bg: '#fec9b9'},
  ]
  const getRanColor = colors[Math.floor(Math.random() * colors.length)];

  const Wrapper = styled.div`
  background: ${getRandomQuote.bg};
  color: ${getRandomQuote.color}`
  return (
    <Router>
      <Switch>
        <Wrapper>
          // Use a `render` prop here
          <Route key="home" path="/" render={(props) => (<Home globalColor={getRanColor} {...props} />)} exact />
        </Wrapper>
      </Switch>
    </Router>
  )
}

这会将 globalColor prop 放入您想要的 Home 组件中，可以使用 this.props.globalColor 访问。

顺便提一下，在您的父组件 App() 中有两个地方您使用的是 getRandomQuote 而不是 getRanColor 。这不能解决您的特定问题，但它会导致您的样式无法正常工作并可能引发错误。