javascript - 如何传达倍数成分

我正在学习React Js，但是我将知道与此库通信multiple组件。例如：

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
}

不管这个文件是否在同一个文件夹中。

最佳答案

文件一包含我们的状态，我们可以将该状态作为道具传递给任何组件。

我将this.state.greeting传递给fileTwo组件，其中包含“ hello”作为名为问候的道具。

另外，您还希望班级名称以大写字母开头。

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>