มีวิธีการส่งผ่านองค์ประกอบหนึ่งไปยังส่วนประกอบปฏิกิริยาอื่นหรือไม่? ฉันต้องการสร้างแบบจำลององค์ประกอบการตอบสนองและส่งผ่านองค์ประกอบการตอบสนองอื่นเพื่อแปลงเนื้อหานั้น

แก้ไข: นี่คือ codepen reactJS แสดงสิ่งที่ฉันพยายามทำ http://codepen.io/aallbrig/pen/bEhjo

HTML

<div id="my-component">
    <p>Hi!</p>
</div>

ReactJS

/**@jsx React.DOM*/

var BasicTransclusion = React.createClass({
  render: function() {
    // Below 'Added title' should be the child content of <p>Hi!</p>
    return (
      <div>
        <p> Added title </p>
        {this.props.children}
      </div>
    )
  }
});

React.renderComponent(BasicTransclusion(), document.getElementById('my-component'));

คุณสามารถใช้this.props.childrenเพื่อแสดงสิ่งที่องค์ประกอบของเด็ก ๆ :

const Wrap = ({ children }) => <div>{children}</div>

export default () => <Wrap><h1>Hello word</h1></Wrap>

หมายเหตุฉันให้คำตอบเชิงลึกเพิ่มเติม ที่นี่

เสื้อคลุมรันไทม์:

มันเป็นวิธีที่งี่เง่าที่สุด

const Wrapper = ({children}) => (
  <div>
    <div>header</div>
    <div>{children}</div>
    <div>footer</div>
  </div>
);

const App = () => <div>Hello</div>;

const WrappedApp = () => (
  <Wrapper>
    <App/>
  </Wrapper>
);

โปรดทราบว่าchildrenเป็น "เสาพิเศษ" ใน React และตัวอย่างข้างต้นคือน้ำตาลประโยคและเทียบเท่า (เกือบ)<Wrapper children={<App/>}/>

wrapper การเริ่มต้น / HOC

คุณสามารถใช้ส่วนประกอบการสั่งซื้อที่สูงขึ้น (HOC) พวกเขาถูกเพิ่มไปยังเอกสารอย่างเป็นทางการเมื่อเร็ว ๆ นี้

// Signature may look fancy but it's just 
// a function that takes a component and returns a new component
const wrapHOC = (WrappedComponent) => (props) => (
  <div>
    <div>header</div>
    <div><WrappedComponent {...props}/></div>
    <div>footer</div>
  </div>
)

const App = () => <div>Hello</div>;

const WrappedApp = wrapHOC(App);

สิ่งนี้สามารถนำไปสู่การแสดงที่ดีขึ้น (เล็กน้อย) เนื่องจากส่วนประกอบของ wrapper สามารถลัดวงจรการเรนเดอร์หนึ่งก้าวไปข้างหน้าด้วย shouldComponentUpdate ในขณะที่ในกรณีของ wrapper รันไทม์เด็ก ๆ prop น่าจะเป็น ReactElement ที่แตกต่างกัน แม้ว่าคอมโพเนนต์ของคุณจะขยาย PureComponent

โปรดสังเกตว่าconnectRedux เคยเป็น wrapper รันไทม์ แต่ถูกเปลี่ยนเป็น HOC เพราะอนุญาตให้หลีกเลี่ยงการแสดงผลซ้ำที่ไร้ประโยชน์หากคุณใช้pureตัวเลือก (ซึ่งเป็นจริงโดยค่าเริ่มต้น)

คุณไม่ควรเรียก HOC ระหว่างขั้นตอนการสร้างภาพเพราะการสร้างองค์ประกอบแบบ React อาจมีราคาแพง คุณควรเรียก wrappers เหล่านี้เมื่อเริ่มต้น

โปรดทราบว่าเมื่อใช้ส่วนประกอบที่ใช้งานได้ด้านบนรุ่น HOC จะไม่มีการปรับให้เหมาะสมที่มีประโยชน์เพราะส่วนประกอบการทำงานที่ไร้สัญชาตินั้นไม่ได้ใช้งาน shouldComponentUpdate

คำอธิบายเพิ่มเติมได้ที่นี่: https://stackoverflow.com/a/31564812/82609

const ParentComponent = (props) => {
  return(
    {props.childComponent}
    //...additional JSX...
  )
}

//import component
import MyComponent from //...where ever

//place in var
const myComponent = <MyComponent />

//pass as prop
<ParentComponent childComponent={myComponent} />

Facebook แนะนำการใช้ส่วนประกอบไร้สัญชาติที่มา: https://facebook.github.io/react/docs/reusable-components.html

ในโลกอุดมคติองค์ประกอบส่วนใหญ่ของคุณจะเป็นฟังก์ชันไร้สัญชาติเพราะในอนาคตเราจะสามารถเพิ่มประสิทธิภาพการทำงานเฉพาะสำหรับส่วนประกอบเหล่านี้โดยหลีกเลี่ยงการตรวจสอบและจัดสรรหน่วยความจำที่ไม่จำเป็น นี่คือรูปแบบที่แนะนำเมื่อเป็นไปได้

function Label(props){
    return <span>{props.label}</span>;
}

function Hello(props){
    return <div>{props.label}{props.name}</div>;
}

var hello = Hello({name:"Joe", label:Label({label:"I am "})});

ReactDOM.render(hello,mountNode);

คุณสามารถผ่านมันเป็นเสาปกติ: foo={<ComponentOne />}

ตัวอย่างเช่น:

const ComponentOne = () => <div>Hello world!</div>
const ComponentTwo = () => (
  <div>
    <div>Hola el mundo!</div>
    <ComponentThree foo={<ComponentOne />} />
  </div>
)
const ComponentThree = ({ foo }) => <div>{foo}</div>

ฉันชอบใช้ React ในตัว API:

import React, {cloneElement, Component} from "react";
import PropTypes from "prop-types";

export class Test extends Component {
  render() {
    const {children, wrapper} = this.props;
    return (
      cloneElement(wrapper, {
        ...wrapper.props,
        children
      })
    );
  }
}

Test.propTypes = {
  wrapper: PropTypes.element,
  // ... other props
};

Test.defaultProps = {
  wrapper: <div/>,
  // ... other props
};

จากนั้นคุณสามารถแทนที่ div wrapper ด้วยสิ่งที่คุณต้องการ:

<Test wrapper={<span className="LOL"/>}>
  <div>child1</div>
  <div>child2</div>
</Test> 

คุณสามารถส่งผ่านส่วนประกอบได้ อุปกรณ์ประกอบฉากและทำให้มันมีการแก้ไข

var DivWrapper = React.createClass({
    render: function() {
        return <div>{ this.props.child }</div>;
    }
});

จากนั้นคุณจะผ่านการpropเรียกใช้childซึ่งจะเป็นองค์ประกอบการตอบสนอง

มาถึงช่วงท้ายเกม แต่นี่เป็นรูปแบบ HOC ที่ทรงพลังสำหรับการเอาชนะส่วนประกอบโดยการจัดให้มันเป็นเสา มันง่ายและสง่างาม

สมมติว่าMyComponentแสดงAส่วนประกอบสมมติแต่คุณต้องการอนุญาตให้มีการแทนที่แบบกำหนดเองAในตัวอย่างนี้Bซึ่งล้อมรอบAด้วย a <div>...</div>และผนวก "!" เพื่อ prop ข้อความ:

import A from 'fictional-tooltip';

const MyComponent = props => (
  <props.A text="World">Hello</props.A>
);
MyComponent.defaultProps = { A };

const B = props => (
  <div><A {...props} text={props.text + '!'}></div>
);

ReactDOM.render(<MyComponent A={B}/>);

ที่จริงแล้วคำถามของคุณคือวิธีการเขียนส่วนประกอบคำสั่งซื้อที่สูงขึ้น (HOC) เป้าหมายหลักของการใช้ HOC คือการป้องกันการคัดลอก คุณสามารถเขียน HOC ของคุณเป็นองค์ประกอบที่ใช้งานได้อย่างหมดจดหรือเป็นตัวอย่างในชั้นเรียน:

    class Child extends Component {
    render() {
        return (
            <div>
                Child
            </div>
        );
    }
}

ถ้าคุณต้องการที่จะเขียนองค์ประกอบหลักของคุณเป็นองค์ประกอบตามระดับ:

    class Parent extends Component {
    render() {
        return (
            <div>
                {this.props.children}
            </div>
        );
    }
}

หากคุณต้องการที่จะเขียนผู้ปกครองของคุณเป็นองค์ประกอบการทำงาน:

    const Parent=props=>{
    return(
        <div>
            {props.children}
        </div>
    )
}

นี่คือตัวอย่างขององค์ประกอบหลักของรายการปฏิกิริยาและประกอบฉากที่มีองค์ประกอบตอบสนอง ในกรณีนี้จะมีการส่งผ่านส่วนประกอบการตอบสนองลิงก์เดียว(ตามที่เห็นในการแสดงผล dom)

class Link extends React.Component {
  constructor(props){
    super(props);
  }
  render(){
    return (
      <div>
        <p>{this.props.name}</p>
      </div>
     );
  }
}
class List extends React.Component {
  render(){
   return(
    <div>
       {this.props.element}
       {this.props.element}
    </div>
   );
  }
}

ReactDOM.render(
  <List element = {<Link name = "working"/>}/>,
  document.getElementById('root')
);

ใช่คุณสามารถทำได้โดยใช้อุปกรณ์ประกอบฉากที่คุณสามารถส่งผ่านข้อมูลของส่วนประกอบเป็นวัตถุเช่นอุปกรณ์ประกอบฉากและจากนั้นภายในองค์ประกอบที่คุณสามารถนำเข้าส่วนประกอบอื่นและผูกแบบไดนามิกกับข้อมูล prpps อ่านเพิ่มเติมเกี่ยวกับองค์ประกอบการตอบสนอง