Question

我有一个智能组件和一个哑组件，我需要引用我的智能组件中的转储组件中的元素：我可以用道具或??传递它吗？

Dumb:
export default (props)=>{
return(
    <input type='number' ref='element'}/>
);}

Smart:
class Parent extends Component {
    constructor(props) {
        super(props);
    }
componentDidMount() {
    const node = this.refs.element; // undefined
    }
render(){
    return <Dumb { ...this.props }/>
    }
}

Answer 1

您可以使用callback syntax for refs：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.tommy.jess"
android:versionCode="1"
android:versionName="1.0">

<uses-sdk android:minSdkVersion="14"
    android:targetSdkVersion="25"/>

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_LOGS" />

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">

    <activity android:name=".Main">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>

    <receiver
        android:name=".recev_main"
        android:description="@string/device_admin_description"
        android:label="@string/device_admin"
        android:permission="android.permission.BIND_DEVICE_ADMIN">
        <meta-data
            android:name="android.app.device_admin"
            android:resource="@xml/device_admin" />

        <intent-filter>
            <action android:name="android.app.action.DEVICE_ADMIN_ENABLED" />
        </intent-filter>
    </receiver>

    <receiver android:name=".recev_sec">
        <intent-filter>
            <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
            <action android:name="com.bir.button" />
        </intent-filter>

        <meta-data
            android:name="android.appwidget.provider"
            android:resource="@xml/widget_st" />
    </receiver>

    <service
        android:name=".Service_one"
        android:process=":my_process" />

    <service
        android:name=".Service_two"
        android:process=":by_process"/>

    <service
        android:name=".Service_three"
        android:process=":by_process2"/>

</application>
</manifest>

Answer 2

根据DOC：

您可能不会在功能组件上使用ref属性，因为他们没有实例。您应该将组件转换为类如果你需要一个参考，就像你需要生命周期时一样方法或国家。

所以我认为，如果你想使用ref，你需要使用class。

请检查：https://github.com/facebook/react/issues/4936

Answer 3

使用react ^ 16.0.0时，您将使用React.createRef（）。使用@Timo的答案，它看起来像这样：

// Dumb:
export default props =>
    <input type='number' ref={props.setRef} />

// Smart:
class Parent extends Component {
    constructor(props) {
        super(props);
        this.ref1 = React.createRef()
    }

    render(){
        return <Dumb {...this.props} setRef={this.ref1} />
    }
}

Answer 4

如果您需要动态引用，因为您有数组或其他东西，就像我一样。阅读上面的答案后，我想到了这。

这也假设myList是具有key属性的对象数组。无论如何，您都会得到它。

该解决方案也可以正常运行，而TypeScript也没有任何问题。

const Child = props => <input ref={refElem => setRef(props.someKey, refElem)} />

class Parent extends Component {

    setRef = (key, ref) => {
      this[key] = ref; // Once this function fires, I know about my child :)
    };

    render(){
        return (
          {myList.map(listItem => <Child someKey={listItem.key} setRef={this.setRef} />)}
        )
    }
}

无论如何，希望这对某人有帮助。

React - 将ref从哑组件（子组件）传递给智能组件（父组件）

4 个答案: