Question

我是React的新手，很抱歉，如果我不在合适的位置发帖在我的脚本中，我只想在其他助词的共同词中传递数组（对不起，我的英语）我的代码

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>;
  }
}

您甚至可以destructure您的道具：

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

其他组件也一样。另外，要注意一件事。您可以使用function components代替类组件，并且不需要将prop作为实例变量：

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} />
}

未定义“道具” no-undef

4 个答案: