Question

我试图调用一个函数作为反应本机映射每个元素。该函数随机确定渲染组件的属性，以便renderComponent中的每个组件都不同。 Item是renderComponent占用的参数，i也是。

旁注：我已尝试使用状态，但您无法循环状态并持续更改其值。

cont randomNumber =  Math.floor(Math.random() * 3);
class whatever extends Component {
  change() {
   const randomNumber = Math.floor(Math.random() * 3);
 }

   renderComponent() {
    if(randomNumber === 0) {
     // Some cool code to set a random properties to the component 
    } else if (randomNumber === 1) {
    // Same thing here and so on and so forth 
    }
 }
  render() {
   return this.props.data.map(this.change.bind(this), (item, i)=> {
     return ({this.renderComponent(item)});
   }
 }
}

但是，当我尝试这个时，我只是得到一个空白，组件不会渲染，因为我认为项目作为参数不会传递

Answer 1

我认为您想要的是使用在每次迭代中映射的项来调用函数。重构你的功能更像是

return this.props.data.map((item, i) => {
   this.renderComponent(item)
})

您的更改函数应返回可从renderComponent

访问的值

随机数常量不能在其定义的范围之外访问。将随机数声明为可以变异的变量，或者作为状态对象中的键，可以从renderComponent函数访问它会有很大帮助。基本上，你的三个功能应该是

change(){this.setState({randomNum: Math.floor(Math.random() * 3) })}

renderComponent(){this.state.randomNum === 0 ? "do something" : "do something else"}

return this.props.data.map((item, i) => {
this.change() //calling this function to keep changing the number held at the state
   this.renderComponent(item)
})

不要忘记初始化randomNum的状态键

Answer 2

在以下代码行中，您没有在数组map上返回任何内容：

return this.props.data.map(this.change.bind(this), (item, i) => {
     {this.renderComponent(item)}
}

你应该按照它的顺序返回某些内容。这样做：

return this.props.data.map(this.change.bind(this), (item, i) => {
     return this.renderComponent(item)
}

如果您不使用React 16，则必须将所有内容放在JSX块中。

Answer 3

您可以在this.change()内拨打renderComponent()。

在课堂外保留变量不是最佳做法。如果需要，您可以将其分配给this.randomVariable

class Whatever extends React.Component {
    change() {
      return Math.floor(Math.random() * 10); //Increased number limit to show it is being called each time
    }

    renderComponent(item) {
      const randomNum = this.change();
      if(randomNum===1) {
        //something and so on
      }
      return randomNum; //Just to show it is different each time
    }
    render() {
      return (
        <div>
          {
            this.props.data.map((item,i)=>{
              return <p>{this.renderComponent(item)}</p>
            })
          }
        </div>
      );
    }
}


ReactDOM.render(<Whatever data={[1, 2, 3, 4]} />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="root"></div>

如果您使用的是React 16，则可以避免包裹div。

每次映射每个元素时调用函数

3 个答案: