如何传递多个组件

Question

我正在学习React Js，但我知道与此库沟通倍数组件。例如：

file1.jsx

class fileOne extends Component{
   //get some value
   //do something
   //send value to file2
}

file2.jsx

class fileTwo extends Component{
   //recive some value
   //do something
   //and return some value
   //to file1
}

file3.jsx

class fileThree extends Component{
   //recive some value
   //do something
   //and return some value
   //to file1
}

这个文件是否在同一文件夹中并不重要。

Answer 1

文件一包含我们的状态，我们可以将此状态传递给任何组件，方法是将其作为道具传递给它。

我通过this.state.greeting，其中包含＆＃39;你好＆＃39;作为一个名为greetingTwo的问候的道具。

您还希望类名以大写字母开头。

class FileOne extends Component{
state={greeting:'hello'}

render() {
 return (
 <div> 
    <FileTwo greeting={this.state.greeting}/> 
    <FileThree greeting={this.state.greeting} />
 </div> 
  )
 }
}

FileTwo可以使用this.props从fileOne获取问候语。我们可以使用花括号来渲染它。

class FileTwo extends Component{
 render() {
  return (
    <div>This is the greeting {this.props.greeting} </div>
   )
  }
}

功能无状态组件可以从父组件FileOne接收道具。

const FileThree = (props) => <div> 
    This is the third file component, 
    it can recieve props just like the second file {props.greeting} 
</div>