'props' 未定义 no-undef

Question

我是反应的新手，对不起，如果我没有在一个好的地方发帖在我的脚本中我只想在其他 coponant 的 coponant 中传递一个数组（对不起我的英语）我的代码

 class ListItem extends React.Component { constructor(props) { super(props) } render() { // Correct! There is no need to specify the key here: return <li>{props.value}</li>; } } class NumberList extends React.Component { constructor(props) { super(props) } render() { const numbers = props.numbers; const listItems = numbers.map((number) => // Correct! Key should be specified inside the array. <ListItem key={number.toString()} value={number} /> ); return ( <ul> {listItems} </ul> ); } } // ======================================== const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( <NumberList numbers={numbers} />, document.getElementById('root') );

Answer 1

在类组件中，虽然类实例有多余的道具：

// not props.numbers
const numbers = this.props.numbers;

---

class ListItem extends React.Component {
  render() {
    return <li>{this.props.value}</li>;
  }
}
class NumberList extends React.Component {
  render() {
    const numbers = this.props.numbers;
    const listItems = numbers.map((number) => (
      <ListItem key={number.toString()} value={number} />
    ));
    return <ul>{listItems}</ul>;
  }
}

Answer 2

在两个组件props的 render() 函数中都有一个实例变量。 为了获得你需要做的道具：

class ListItem extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <li>{this.props.value}</li>;
  }
}

你甚至可以解构你的道具：

class ListItem extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { value } = this.props;
    return <li>{value}</li>;
  }
}

其他组件也是如此。 另外，要注意一件事。 您可以使用函数组件而不是类组件，并且不需要将道具作为实例变量：

function ListItem({ value }) {
  return <li>{value}</li>;
}

以上可以替换您当前的实现。

Answer 3

非常感谢 ！！！ 这两种解决方案都在起作用:)但是一个问题是可以传递像 myComponantParent{ myArray[] 这样的数组

} 类 myComponantChildren{ 显示 myArray

? 因此，要将数组从一个组件传递到另一个组件，而不在 ReactDom 之前声明该数组，而是在父组件中声明该数组以将其显示为子组件

谢谢你的帮助 ：）

Answer 4

您可以将变量从父组件传递给子组件，如下所示：

function ChildComponent({ array }) {
  if (!array || arr.length === 0) {
    return <p>No array was passed</p>
  }

  return (
    <ul>
      {array.map((value, index) => (
        <li key={index}>
          {value}
        </li>
      ))}
    </ul>
  )
}

function ParentComponent() {
  const arr = [1, 2, 3]
  return <ChildComponent array={arr} />
}